/* GF Web Co. — production studio visual layer. */
:root {
  --ink: #0b0b0b;
  --deep: #0b0b0b;
  --forest: #0b0b0b;
  --moss: #d8ff3f;
  --paper: #ecebe6;
  --cream: #f5f4ef;
  --line: #c9c8c1;
  --muted: #666660;
  --orange: #d8ff3f;
  --max: 1600px;
  --pad: clamp(22px, 4.5vw, 76px);
}
html { background: var(--cream); }
body { overflow-x:hidden; background:var(--cream); color:var(--ink); font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; }
.site-header { position:sticky; top:0; z-index:50; max-width:none; min-height:76px; padding:16px var(--pad); border-bottom:1px solid rgba(11,11,11,.15); background:rgba(245,244,239,.9); backdrop-filter:blur(18px); transition:min-height .3s ease,background .3s ease,box-shadow .3s ease; }
.site-header.is-scrolled { min-height:64px; background:rgba(245,244,239,.96); box-shadow:0 12px 36px rgba(11,11,11,.06); }
.brand { gap:10px; font-weight:700; font-size:15px; letter-spacing:-.04em; }
.brand img { width:34px; height:34px; }
.brand small { margin-top:1px; font-size:8px; letter-spacing:.2em; }
.site-header nav { gap:clamp(16px,2vw,30px); }
.site-header nav a { position:relative; font-size:12px; font-weight:600; letter-spacing:-.01em; }
.site-header nav a:not(.nav-cta)::after { content:""; position:absolute; left:0; right:100%; bottom:-5px; height:1px; background:currentColor; transition:right .25s ease; }
.site-header nav a:not(.nav-cta):hover::after { right:0; }
.nav-cta { padding:12px 18px !important; border:1px solid var(--ink) !important; border-radius:999px; background:var(--ink); color:#fff; transition:transform .2s ease,background .2s ease,color .2s ease; }
.nav-cta:hover { transform:translateY(-2px); background:var(--moss); color:var(--ink); }
.hero { position:relative; max-width:none; min-height:calc(100svh - 76px); grid-template-columns:minmax(0,1.75fr) minmax(290px,.55fr); gap:clamp(36px,6vw,110px); padding:clamp(72px,8vw,128px) var(--pad) clamp(52px,7vw,96px); align-items:end; }
.hero::before { content:"GF / WEB"; position:absolute; right:var(--pad); top:34px; font-size:10px; font-weight:700; letter-spacing:.22em; opacity:.45; }
.hero-copy { max-width:1220px; }
.hero .eyebrow { margin:0 0 clamp(34px,5vw,68px); color:var(--ink); font-size:10px; font-weight:700; letter-spacing:.18em; }
.hero h1 { max-width:1240px; margin:0 0 38px; font-size:clamp(62px,9.35vw,154px); font-weight:650; line-height:.88; letter-spacing:-.075em; text-wrap:balance; }
.hero .lede { max-width:660px; margin-left:clamp(0px,14vw,210px); font-size:clamp(18px,1.55vw,25px); line-height:1.35; color:#353531; letter-spacing:-.025em; }
.hero-actions { margin:38px 0 0 clamp(0px,14vw,210px); gap:28px; }
.button { position:relative; align-items:center; justify-content:center; min-height:52px; padding:14px 23px; border-radius:999px; font-size:12px; font-weight:700; transition:transform .2s ease,background .2s ease,color .2s ease; }
.button:hover { transform:translateY(-2px); background:var(--moss); border-color:var(--moss); color:var(--ink); }
.text-link { border-bottom:1px solid currentColor; padding-bottom:5px; font-size:12px; }
.hero-panel { align-self:end; min-height:440px; padding:30px; background:var(--moss); color:var(--ink); border-radius:2px; }
.hero-panel > p { color:var(--ink); font-weight:700; }
.hero-panel li { border-bottom-color:rgba(11,11,11,.2); font-size:clamp(17px,1.45vw,22px); letter-spacing:-.03em; }
.hero-panel li span { color:var(--ink); opacity:.55; }
.panel-note { color:var(--ink); opacity:.7; }
.marquee { max-width:none; padding:16px var(--pad); border-color:var(--ink); background:var(--ink); color:#fff; font-size:10px; font-weight:700; letter-spacing:.16em; }
.marquee span::before { content:"•"; margin-right:20px; color:var(--moss); }
.home-section { max-width:none; }
.services.home-section,.approach.home-section { padding:clamp(100px,11vw,180px) var(--pad); }
.services.home-section { background:var(--cream); }
.section-intro { max-width:var(--max); margin-left:auto; margin-right:auto; grid-template-columns:minmax(120px,.45fr) minmax(0,1.55fr); gap:clamp(32px,8vw,140px); margin-bottom:clamp(56px,7vw,108px); }
.section-intro .eyebrow { color:var(--ink); }
.section-intro h2 { max-width:1040px; font-size:clamp(46px,6.7vw,108px); font-weight:600; line-height:.94; letter-spacing:-.065em; }
.section-intro > p:last-child { max-width:560px; margin-left:auto; color:var(--muted); font-size:16px; }
.service-grid { max-width:var(--max); margin:0 auto; border-top:1px solid var(--ink); }
.service-grid article { min-height:310px; padding-top:26px; }
.service-grid article + article { padding-left:clamp(24px,3vw,48px); }
.service-grid article:not(:last-child) { border-right-color:rgba(11,11,11,.18); }
.service-grid span { color:var(--ink); opacity:.5; }
.service-grid h3 { margin-top:88px; font-size:clamp(27px,2.2vw,38px); font-weight:600; letter-spacing:-.045em; }
.service-grid p { max-width:380px; font-size:15px; line-height:1.55; }
.section-link { display:block; width:max-content; max-width:var(--max); margin:46px auto 0; border-bottom:1px solid currentColor; padding-bottom:5px; font-size:12px; }
.work.home-section,.work.featured-work-page { padding:clamp(104px,10vw,170px) var(--pad); background:var(--ink); color:#fff; }
.work.home-section > .section-intro,.work.home-section .project-grid,.work.featured-work-page > .section-intro,.work.featured-work-page .project-grid { max-width:var(--max); }
.work.home-section .section-intro h2,.work.featured-work-page .section-intro h2 { color:#fff; }
.work.home-section .section-intro .eyebrow,.work.featured-work-page .section-intro .eyebrow { color:var(--moss); }
.work.home-section .section-intro > p:last-child,.work.featured-work-page .section-intro > p:last-child { color:rgba(255,255,255,.6); }
.work.home-section .project-grid,.work.featured-work-page .project-grid { display:grid; grid-template-columns:1fr; gap:0; }

/* Featured work is composed as a real 12-column editorial layout, not centred cards. */
.work.home-section .project-card.live-project,.work.featured-work-page .project-card.live-project {
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(20px,2.4vw,42px);
  align-items:center;
  min-height:clamp(590px,58vw,900px);
  padding:clamp(74px,8vw,132px) 0;
  border-top:1px solid rgba(255,255,255,.18);
  background:transparent;
  color:#fff;
}
.work.home-section .project-card.live-project:last-child,.work.featured-work-page .project-card.live-project:last-child { border-bottom:1px solid rgba(255,255,255,.18); }
.work.home-section .project-card.live-project:nth-child(odd) .project-image,.work.featured-work-page .project-card.live-project:nth-child(odd) .project-image { grid-column:1 / span 8; grid-row:1; }
.work.home-section .project-card.live-project:nth-child(odd) .project-copy,.work.featured-work-page .project-card.live-project:nth-child(odd) .project-copy { grid-column:9 / -1; grid-row:1; }
.work.home-section .project-card.live-project:nth-child(even) .project-image,.work.featured-work-page .project-card.live-project:nth-child(even) .project-image { grid-column:5 / -1; grid-row:1; }
.work.home-section .project-card.live-project:nth-child(even) .project-copy,.work.featured-work-page .project-card.live-project:nth-child(even) .project-copy { grid-column:1 / span 4; grid-row:1; }
.work.home-section .project-card.live-project .project-image,.work.featured-work-page .project-card.live-project .project-image {
  width:100%;
  margin:0;
  border-radius:2px;
  background:#202020;
  overflow:hidden;
}
.work.home-section .project-card.live-project .live-project-art,.work.featured-work-page .project-card.live-project .live-project-art {
  aspect-ratio:16/10.2;
  padding:0;
}
.work.home-section .project-card.live-project .project-image img,.work.featured-work-page .project-card.live-project .project-image img {
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:top;
  transition:transform .7s cubic-bezier(.2,.75,.2,1),filter .4s ease;
}
.work.home-section .project-card.live-project:hover .project-image img,.work.featured-work-page .project-card.live-project:hover .project-image img { transform:scale(1.018); }
.work.home-section .project-card.live-project .project-copy,.work.featured-work-page .project-card.live-project .project-copy {
  display:block;
  width:auto;
  margin:0;
  padding:0 0 clamp(16px,2.4vw,40px);
  align-self:end;
}
.work.home-section .project-card.live-project .project-copy .kicker,.work.featured-work-page .project-card.live-project .project-copy .kicker {
  margin:0 0 clamp(20px,2vw,32px);
  color:var(--moss);
  font-size:10px;
  font-weight:700;
  letter-spacing:.13em;
  line-height:1.55;
  text-transform:uppercase;
}
.work.home-section .project-card.live-project .project-copy h3,.work.featured-work-page .project-card.live-project .project-copy h3 {
  margin:0 0 clamp(22px,2.2vw,36px);
  max-width:430px;
  font-size:clamp(46px,5vw,80px);
  font-weight:600;
  line-height:.92;
  letter-spacing:-.065em;
}
.work.home-section .project-card.live-project .project-copy p:not(.kicker),.work.featured-work-page .project-card.live-project .project-copy p:not(.kicker) {
  max-width:390px;
  margin:0;
  color:rgba(255,255,255,.64);
  font-size:14px;
  line-height:1.65;
}
.work.home-section .project-card.live-project .card-actions,.work.featured-work-page .project-card.live-project .card-actions {
  margin:clamp(28px,3vw,48px) 0 0;
  padding:0;
  border:0;
  flex-direction:column;
  align-items:flex-start;
  white-space:nowrap;
}
.work.home-section .project-card.live-project .card-actions a,.work.featured-work-page .project-card.live-project .card-actions a { color:#fff; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:5px; }
.work-archive-link { color:#fff; border-color:#fff; }
.live-project-art { position:relative; display:flex; aspect-ratio:16/8.8; padding:clamp(24px,5vw,70px); flex-direction:column; justify-content:space-between; color:#fff; text-decoration:none; isolation:isolate; }
.live-project-art::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.24; background:linear-gradient(180deg,rgba(0,0,0,.34),transparent 28%,transparent 72%,rgba(0,0,0,.28)); }
.live-project-art::after { content:none; }
.live-project-art.tone-berry { background:#8c123f; }
.live-project-art.tone-forest { background:#173b31; }
.live-project-art.tone-jade { background:#365448; }
.live-project-art.tone-gold { background:#8b1a1a; }
.live-project-domain { position:absolute !important; left:clamp(16px,2vw,28px); top:clamp(16px,2vw,28px); z-index:2; font-size:9px !important; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:1 !important; }
.live-project-art strong { max-width:1000px; font-size:clamp(56px,9vw,150px); line-height:.84; letter-spacing:-.075em; font-weight:650; }
.live-project-arrow { position:absolute; right:clamp(18px,2.5vw,36px); bottom:clamp(16px,2.5vw,32px); z-index:2; font-size:clamp(36px,4.4vw,68px); line-height:1; transition:transform .3s ease; }
.live-project-art:hover .live-project-arrow { transform:translate(8px,-8px); }
.concept-archive-intro { max-width:var(--max); margin:auto; padding:clamp(90px,10vw,150px) var(--pad) 30px; }
.concept-archive-intro h2 { max-width:900px; font-size:clamp(44px,6vw,88px); line-height:.95; letter-spacing:-.055em; margin:12px 0 24px; }
.concept-archive-intro p:last-child { max-width:650px; color:var(--muted); }
.approach.home-section { max-width:var(--max); grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }
.approach h2 { max-width:720px; font-size:clamp(48px,6.5vw,100px); font-weight:600; line-height:.94; }
.approach li { grid-template-columns:72px 1fr; padding:30px 0; border-top-color:rgba(11,11,11,.2); }
.approach li > span { color:var(--ink); opacity:.48; }
.approach b { font-size:clamp(20px,2vw,29px); font-weight:600; letter-spacing:-.035em; }
.approach p { max-width:520px; font-size:14px; }
.quote-band { position:relative; overflow:hidden; padding:clamp(104px,12vw,190px) var(--pad); background:var(--moss); color:var(--ink); }
.quote-band::after { content:"↗"; position:absolute; right:4vw; bottom:-6vw; font-size:clamp(180px,30vw,520px); line-height:.7; opacity:.07; }
.quote-band .eyebrow { color:var(--ink); }
.quote-band h2 { position:relative; z-index:1; max-width:1180px; font-size:clamp(52px,7.5vw,122px); font-weight:600; line-height:.91; letter-spacing:-.07em; }
.quote-band > p:not(.eyebrow) { position:relative; z-index:1; font-size:16px; }
.quote-band .button.light { position:relative; z-index:1; background:var(--ink); border-color:var(--ink); color:#fff; }
.quote-band .button.light:hover { background:#fff; border-color:#fff; color:var(--ink); }
.page-hero { max-width:var(--max); padding-top:clamp(90px,10vw,160px); padding-bottom:clamp(90px,10vw,160px); }
.page-hero h1 { max-width:1260px; font-size:clamp(58px,8.5vw,136px); font-weight:600; line-height:.9; letter-spacing:-.07em; }
.page-hero > p:last-child { font-size:clamp(18px,1.7vw,24px); }
.service-list h2,.process-list h2,.pricing-grid h2,.values h3 { font-weight:600; }
.project-card,.pricing-grid article,.form-layout form,.contact-card > div { border-radius:2px; }
footer { max-width:none; padding:64px var(--pad); background:var(--ink); color:rgba(255,255,255,.62); }
footer .brand { color:#fff; }
footer .brand small { color:rgba(255,255,255,.55); }
footer .brand img { filter:brightness(0) invert(1); }
footer a:hover { color:#fff; }
.reveal-ready { opacity:0; transform:translateY(24px); transition:opacity .72s cubic-bezier(.2,.75,.2,1),transform .72s cubic-bezier(.2,.75,.2,1); }
.reveal-ready.is-visible { opacity:1; transform:translateY(0); }
.project-card.reveal-ready { transform:translateY(36px); }
.project-card.reveal-ready.is-visible { transform:translateY(0); }
@media(max-width:1050px){.hero{grid-template-columns:1fr;min-height:auto}.hero-copy{padding-top:30px}.hero .lede,.hero-actions{margin-left:0}.hero-panel{min-height:330px}.work.home-section .project-card.live-project,.work.featured-work-page .project-card.live-project{display:block;min-height:0;padding:clamp(54px,7vw,82px) 0}.work.home-section .project-card.live-project .project-image,.work.featured-work-page .project-card.live-project .project-image{width:100%;margin:0}.work.home-section .project-card.live-project .project-copy,.work.featured-work-page .project-card.live-project .project-copy{width:100%;margin:0;padding:28px 0 0;display:grid;grid-template-columns:110px 1fr 1.25fr;gap:18px 28px;align-items:start}.work.home-section .project-card.live-project .project-copy .kicker,.work.featured-work-page .project-card.live-project .project-copy .kicker{margin:7px 0 0}.work.home-section .project-card.live-project .project-copy h3,.work.featured-work-page .project-card.live-project .project-copy h3{margin:0}.work.home-section .project-card.live-project .project-copy p:not(.kicker),.work.featured-work-page .project-card.live-project .project-copy p:not(.kicker){margin:7px 0 0}.work.home-section .project-card.live-project .card-actions,.work.featured-work-page .project-card.live-project .card-actions{grid-column:2/-1;margin:10px 0 0;flex-direction:row;justify-content:flex-start;align-items:center}}
@media(max-width:850px){.site-header{min-height:68px}.site-header nav{left:14px;right:14px;top:70px;padding:10px;border:1px solid var(--ink);background:var(--cream);box-shadow:0 22px 50px rgba(11,11,11,.14)}.site-header nav a{padding:15px 12px}.nav-cta{margin-top:8px;text-align:center}.menu{border-color:var(--ink);border-radius:999px;padding:9px 14px;font-size:11px;font-weight:700}.hero{padding-top:74px}.hero::before{display:none}.hero h1{font-size:clamp(58px,14vw,96px)}.hero-panel{min-height:300px}.section-intro{grid-template-columns:1fr;gap:22px}.section-intro .eyebrow{grid-row:auto}.section-intro>p:last-child{margin-left:0}.service-grid{grid-template-columns:1fr}.service-grid article,.service-grid article+article{min-height:0;padding:30px 0;border-right:0;border-bottom:1px solid rgba(11,11,11,.2)}.service-grid h3{margin-top:42px}.section-link{margin-left:0}.work.home-section .project-card.live-project .project-copy,.work.featured-work-page .project-card.live-project .project-copy{grid-template-columns:1fr 1fr;gap:14px 22px}.work.home-section .project-card.live-project .project-copy .kicker,.work.featured-work-page .project-card.live-project .project-copy .kicker{grid-column:1}.work.home-section .project-card.live-project .project-copy h3,.work.featured-work-page .project-card.live-project .project-copy h3{grid-column:1/-1;font-size:clamp(40px,7vw,58px)}.work.home-section .project-card.live-project .project-copy p:not(.kicker),.work.featured-work-page .project-card.live-project .project-copy p:not(.kicker){grid-column:1/-1}.work.home-section .project-card.live-project .card-actions,.work.featured-work-page .project-card.live-project .card-actions{grid-column:1/-1}.approach.home-section{grid-template-columns:1fr}.live-project-art{aspect-ratio:4/3}.live-project-art strong{font-size:clamp(50px,12vw,95px)}}
@media(max-width:520px){:root{--pad:20px}.brand span{font-size:13px}.hero{padding-top:58px;padding-bottom:46px}.hero .eyebrow{margin-bottom:32px;line-height:1.6}.hero h1{margin-bottom:28px;font-size:clamp(54px,16.3vw,78px);line-height:.9}.hero .lede{font-size:18px}.hero-actions{align-items:flex-start;margin-top:30px}.hero-panel{min-height:285px;padding:24px}.marquee{gap:28px}.services.home-section,.approach.home-section,.work.home-section,.work.featured-work-page{padding-top:88px;padding-bottom:88px}.section-intro{margin-bottom:52px}.section-intro h2{font-size:48px}.work.home-section .project-card.live-project,.work.featured-work-page .project-card.live-project{padding:44px 0}.work.home-section .project-card.live-project .project-image,.work.featured-work-page .project-card.live-project .project-image{aspect-ratio:4/3}.work.home-section .project-card.live-project .project-copy,.work.featured-work-page .project-card.live-project .project-copy{display:block;padding-top:22px}.work.home-section .project-card.live-project .project-copy .kicker,.work.featured-work-page .project-card.live-project .project-copy .kicker{margin:0 0 12px}.work.home-section .project-card.live-project .project-copy h3,.work.featured-work-page .project-card.live-project .project-copy h3{font-size:40px;margin-bottom:12px}.work.home-section .project-card.live-project .card-actions,.work.featured-work-page .project-card.live-project .card-actions{margin-top:22px;align-items:flex-start;flex-direction:column}.approach h2{font-size:50px}.quote-band h2{font-size:54px}.live-project-art{aspect-ratio:1/1.1;padding:0}.live-project-art strong{font-size:clamp(44px,14vw,68px)}footer{padding-top:50px;padding-bottom:50px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal-ready{opacity:1!important;transform:none!important}}