:root{--sgf-red:#e20613;--sgf-red-deep:#b32400;--sgf-orange:#ffb200;--sgf-blue:#0066b3;--sgf-blue-deep:#00487d;--sgf-paper:#f0f0ee;--sgf-ink:#090909}
.sgf-case{background:var(--sgf-paper)}
.sgf-case .shell{width:min(var(--content-max),calc(100% - (var(--gutter) * 2)));margin-inline:auto}
.case-section{padding-block:var(--section-space)}
.eyebrow{margin:0;color:var(--sgf-red);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.section-heading h2,.system__header h2,.website__header h2,.motion__header h2,.responsive__header h2,.result h2,.credits h2,.related h2{margin:0;font:400 clamp(54px,6vw,108px)/.9 var(--display);letter-spacing:-.045em}
[data-reveal]{opacity:1;transform:none}
.js [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.js [data-reveal].is-visible{opacity:1;transform:none}

.sgf-hero{position:relative;min-height:calc(100svh - var(--header-h));overflow:hidden;background:#26141e;color:#fff}
.sgf-hero__visual{position:absolute;inset:0;display:grid;overflow:hidden;place-items:center;background:#26141e;pointer-events:none}
.sgf-hero__scene{position:relative;width:100%;height:100%;isolation:isolate}
.sgf-hero__scene::after{position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(17,2,9,.56),rgba(27,3,14,.08) 62%,rgba(8,1,4,.18));content:""}
.sgf-hero__scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.sgf-hero__background{z-index:0}
.sgf-hero__foreground{z-index:2;transform:translate3d(0,var(--hero-foreground-y,0),0);will-change:transform}
.sgf-hero__content{position:relative;z-index:3;display:grid;grid-template-rows:auto 1fr auto;align-content:space-between;min-height:calc(100svh - var(--header-h));padding-block:clamp(95px,10vw,155px) clamp(46px,5vw,80px)}
.sgf-hero__kicker{margin:0;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.sgf-hero h1{align-self:center;max-width:1200px;margin:0;font:400 clamp(82px,12.5vw,235px)/.88 var(--display);letter-spacing:-.07em;text-transform:uppercase}
.sgf-hero__bottom{display:grid;grid-template-columns:minmax(300px,650px) 1fr auto;gap:clamp(30px,5vw,85px);align-items:end}
.sgf-hero__bottom>p{max-width:650px;margin:0;font-size:clamp(17px,1.4vw,24px);line-height:1.35}
.sgf-hero__tags{display:flex;flex-wrap:wrap;gap:8px}
.sgf-hero__tags span{padding:7px 11px;border:1px solid rgba(255,255,255,.48);font-size:10px;text-transform:uppercase}
.sgf-hero__bottom>a{font-size:12px;text-decoration:none;text-transform:uppercase;white-space:nowrap}
.sgf-hero__bottom>a span{margin-left:12px}

.case-index{position:sticky;z-index:60;top:var(--header-h);display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--line-dark);background:rgba(244,243,239,.96);backdrop-filter:blur(14px)}
.case-index a{min-height:58px;display:flex;gap:12px;align-items:center;justify-content:center;border-right:1px solid var(--line-dark);color:#353538;font-size:10px;letter-spacing:.08em;text-decoration:none;text-transform:uppercase;transition:background .2s,color .2s}
.case-index a:last-child{border-right:0}
.case-index a:is(:hover, :focus-visible),.case-index a[aria-current="true"]{background:#fff;color:var(--sgf-red)}
.case-index a span{color:var(--sgf-red);font-size:9px}

.context{background:var(--sgf-paper)}
.section-heading{display:grid;grid-template-columns:.28fr 1.1fr;gap:clamp(35px,6vw,110px);align-items:start}
.section-heading h2{max-width:1220px}
.context__grid{display:grid;grid-template-columns:1.004fr 1fr;gap:clamp(60px,10vw,190px);margin-top:clamp(80px,10vw,160px)}
.context__lead{margin:0;font-size:clamp(27px,3vw,50px);line-height:1.18;letter-spacing:-.03em}
.context__copy{max-width:760px;font-size:19px;line-height:1.5}
.context__copy p{margin:0 0 1.2em}
.scope{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(80px,10vw,150px);border-top:1px solid #bbb;border-left:1px solid #bbb}
.scope article{min-height:250px;padding:24px;border-right:1px solid #bbb;border-bottom:1px solid #bbb}
.scope span{color:var(--sgf-red);font-size:10px}
.scope strong{display:block;margin-top:78px;font:400 clamp(31px,3vw,53px)/.9 var(--display)}
.scope p{max-width:270px;margin:20px 0 0;color:#68686b;font-size:13px;line-height:1.35}

.system{overflow:hidden;background:#fff}
.system__header{display:grid;grid-template-columns:.25fr 1fr .42fr;gap:clamp(35px,6vw,100px);align-items:end}
.system__header h2{max-width:1040px}
.system__header>p:last-child{max-width:560px;margin:0;font-size:18px}
.palette{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(90px,10vw,160px)}
.palette article{position:relative;aspect-ratio:1;background:var(--swatch);color:#fff;padding:20px}
.palette span{position:absolute;right:20px;bottom:20px;left:20px;font:400 clamp(30px,3.7vw,66px)/.9 var(--display)}
.palette small{font-size:10px;letter-spacing:.1em}
.palette article:nth-child(2){color:#111}
.type-grid{display:grid;grid-template-columns:.6fr .8fr 1fr;gap:clamp(35px,6vw,110px);align-items:end;margin-top:clamp(100px,12vw,190px);padding-top:35px;border-top:1px solid #bbb}
.type-grid>div:first-child{font-family:"Helvetica Neue",Arial,sans-serif}
.type-grid>div:first-child span{display:block;font-size:12px;text-transform:uppercase}
.type-grid>div:first-child strong{display:block;font-size:clamp(120px,16vw,290px);font-weight:400;line-height:.8}
.type-grid>p{margin:0;font-size:21px;line-height:1.4}
.type-grid__alphabet{font-family:"Helvetica Neue",Arial,sans-serif;font-size:clamp(17px,1.6vw,27px);line-height:1.55;word-break:break-all}

.website{overflow:hidden;background:#061d2d;color:#fff}
.website__header{display:grid;grid-template-columns:.22fr 1fr .48fr;gap:clamp(36px,5vw,88px);align-items:end;margin-bottom:clamp(80px,10vw,160px)}
.website__header .eyebrow{color:#80c9ff}
.website__header h2{max-width:900px}
.website__header>div{max-width:580px;color:#b7c9d8;font-size:18px}
.website__header>div p{margin:0 0 1.15em}
.site-demo{border:1px solid rgba(255,255,255,.25);background:#050608;box-shadow:0 42px 100px rgba(0,0,0,.45)}
.site-demo__bar{display:grid;min-height:48px;grid-template-columns:repeat(3,8px) 1fr auto;gap:8px;align-items:center;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.62);font-size:11px}
.site-demo__bar>span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.38)}
.site-demo__bar b{justify-self:center;font-weight:400;letter-spacing:.08em}
.site-demo__bar a{text-decoration:none}
.site-demo__stage{position:relative;height:clamp(650px,78svh,950px);overflow:hidden;background:#fff}
.site-demo__frame{display:block;width:100%;height:100%;border:0;background:#fff}

.motion{overflow:hidden;background:var(--sgf-ink);color:#fff}
.motion__header{display:grid;grid-template-columns:.24fr 1fr .4fr;gap:clamp(35px,6vw,100px);align-items:end}
.motion__header .eyebrow{color:var(--sgf-orange)}
.motion__header h2{max-width:1070px}
.motion__header>p:last-child{margin:0;color:#aaa;font-size:18px}
.motion__services{margin:clamp(90px,10vw,160px) 0 0;background:var(--sgf-blue)}
.motion__services img{width:100%}
.motion__services figcaption,.motion__illustration span,.responsive__board figcaption{padding:13px 0;color:#8e8e91;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.motion__illustration{position:relative;width:calc(100% + 18vw);margin:clamp(100px,12vw,190px) -9vw 0;padding:clamp(65px,8vw,120px) 0 32px;background:#fff;color:#111}
.motion__illustration img{width:100%;height:min(520px,39vw);object-fit:contain;transform:translateX(-4vw)}
.motion__illustration span{display:block;width:min(var(--content-max),calc(100% - (var(--gutter)*2)));margin:20px auto 0}

.responsive{overflow:hidden;background:var(--sgf-orange)}
.responsive__header{display:grid;grid-template-columns:.24fr 1fr .42fr;gap:clamp(35px,6vw,100px);align-items:end;margin-bottom:clamp(85px,10vw,150px)}
.responsive__header .eyebrow{color:#111}
.responsive__header h2{max-width:1050px}
.responsive__header>p:last-child{margin:0;font-size:18px}
.responsive__board{width:min(1180px,calc(100% - (var(--gutter)*2)));margin:0 auto}
.responsive__board img{width:100%;height:auto}
.responsive__board figcaption{color:rgba(0,0,0,.65)}

.result{background:#fff}
.result__grid{display:grid;grid-template-columns:1fr .72fr;gap:clamp(70px,10vw,180px);margin-top:clamp(90px,10vw,160px)}
.result__grid>div{max-width:780px;font-size:21px}
.result__grid p{margin:0 0 1.2em}
.result__grid ul{margin:0;padding:0;list-style:none}
.result__grid li{padding:13px 0;border-top:1px solid #bbb;font-size:14px}
.result__grid li:last-child{border-bottom:1px solid #bbb}
.credits{background:var(--sgf-blue);color:#fff}
.credits__grid{display:grid;grid-template-columns:.8fr 1fr;gap:clamp(70px,10vw,190px)}
.credits .eyebrow{color:#bfe4ff}
.credits__list article{display:grid;grid-template-columns:.42fr 1fr;gap:35px;padding:25px 0;border-top:1px solid rgba(255,255,255,.35)}
.credits__list article:last-child{border-bottom:1px solid rgba(255,255,255,.35)}
.credits__list strong{font-size:14px;text-transform:uppercase}
.credits__list span{color:#d3e4f0}

.related{background:var(--sgf-paper)}
.related__grid{display:grid;grid-template-columns:.6fr 1fr;gap:clamp(70px,10vw,180px);align-items:center}
.related h2{margin-top:30px}
.related p:not(.eyebrow){max-width:590px;margin:45px 0 28px;font-size:18px}
.text-link{display:inline-block;border-bottom:1px solid currentColor;text-decoration:none}
.related__grid>a{position:relative;display:block;overflow:hidden;background:#000}
.related__grid>a img{width:100%;aspect-ratio:1.55;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.related__grid>a:hover img{transform:scale(1.025)}
.related__grid>a span{position:absolute;right:18px;bottom:18px;padding:9px 12px;background:#111;color:#fff;font-size:10px;text-transform:uppercase}

.case-contact{background:radial-gradient(circle at 86% 18%,rgba(226,6,19,.22),transparent 38%),var(--black)}
.case-contact .gradient-text{background:linear-gradient(103deg,#ffb200 0%,#e20613 88%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.copy-feedback{opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s ease}
.copy-feedback.is-visible{opacity:1;transform:none}

@media(min-width:1101px){
  .context__lead{min-height:590px}
  .motion__illustration img{width:85.669977%;max-width:none;height:min(445.484px,33.411291vw);margin:27.358px 0 0 7.009365%;transform:none}
}

@media(max-width:1100px){
  .sgf-hero__bottom{grid-template-columns:1fr auto}.sgf-hero__tags{grid-column:1}.sgf-hero__bottom>a{grid-column:2;grid-row:1/3}
  .section-heading,.system__header,.website__header,.motion__header,.responsive__header{grid-template-columns:.24fr 1fr}.system__header>p:last-child,.website__header>div,.motion__header>p:last-child,.responsive__header>p:last-child{grid-column:2}
  .scope{grid-template-columns:1fr 1fr}
  .type-grid{grid-template-columns:.6fr 1fr}.type-grid__alphabet{grid-column:2}
  .credits__grid{grid-template-columns:1fr}.related__grid{grid-template-columns:.7fr 1fr}
}

@media(max-width:760px){
  .case-section{padding-block:clamp(76px,22vw,112px)}
  .sgf-case .shell{width:calc(100% - 40px)}
  .section-heading h2,.system__header h2,.website__header h2,.motion__header h2,.responsive__header h2,.result h2,.credits h2,.related h2{font-size:clamp(46px,14vw,68px)}
  .sgf-hero{min-height:calc(94svh - var(--header-h))}
  .sgf-hero__visual{inset:0}
  .sgf-hero__content{min-height:calc(94svh - var(--header-h));padding:78px 0 32px}
  .sgf-hero h1{font-size:15vw;line-height:.88;letter-spacing:-.045em}
  .sgf-hero__bottom{display:block}.sgf-hero__bottom>p{font-size:16px}.sgf-hero__tags{margin-top:26px}.sgf-hero__bottom>a{display:inline-block;margin-top:28px}
  .case-index{top:var(--header-h);display:flex;overflow-x:auto;scrollbar-width:none}.case-index::-webkit-scrollbar{display:none}.case-index a{min-width:135px;padding:0 16px}
  .section-heading,.system__header,.website__header,.motion__header,.responsive__header{display:block}.section-heading h2,.system__header h2,.website__header h2,.motion__header h2,.responsive__header h2{margin-top:34px}
  .context__grid{grid-template-columns:1fr;gap:50px;margin-top:72px}.context__lead{font-size:30px}.context__copy{font-size:17px}
  .scope{grid-template-columns:1fr;margin-top:72px}.scope article{min-height:210px}.scope strong{margin-top:54px}
  .system__header>p:last-child,.website__header>div,.motion__header>p:last-child,.responsive__header>p:last-child{margin-top:44px;font-size:17px}
  .palette{grid-template-columns:1fr 1fr;margin-top:75px}.palette span{font-size:36px}
  .type-grid{grid-template-columns:1fr;margin-top:85px}.type-grid>div:first-child strong{font-size:180px}.type-grid>p{font-size:18px}.type-grid__alphabet{grid-column:1;font-size:19px}
  .website__header{margin-bottom:65px}.site-demo__bar{grid-template-columns:repeat(3,7px) 1fr}.site-demo__bar b{font-size:9px}.site-demo__bar a{display:none}.site-demo__stage{height:72svh;min-height:620px}
  .motion__services{margin-top:72px}.motion__services img{min-height:190px;object-fit:cover;object-position:center}.motion__illustration{width:140%;margin:80px -20% 0;padding-top:40px}.motion__illustration img{height:300px}.motion__illustration span{width:calc(100% - 40px)}
  .responsive__header{margin-bottom:65px}.responsive__board{width:calc(100% - 40px)}
  .result__grid{grid-template-columns:1fr;gap:55px;margin-top:70px}.result__grid>div{font-size:18px}
  .credits__grid{gap:65px}.credits__list article{grid-template-columns:1fr;gap:13px}.credits__list span{font-size:15px}
  .related__grid{grid-template-columns:1fr;gap:60px}.related p:not(.eyebrow){margin:35px 0 24px;font-size:16px}
  .site-footer nav{display:none}
}

@media(prefers-reduced-motion:reduce){.sgf-hero__background,.sgf-hero__foreground{transform:none!important}.related__grid>a img,.js [data-reveal]{transition:none!important}}
@media print{.site-header,.mobile-menu,.case-index,.site-demo__bar{display:none!important}.sgf-case{padding-top:0}.sgf-hero{min-height:700px}.site-demo__stage{height:700px}}
.case-index{position:relative;top:auto}