:root{
  --ink:#10182d;--cream:#f4f0e7;--paper:#fffdf8;--blue:#3159ff;
  --coral:#ff6846;--mint:#c9ff67;--muted:#596071;--line:#c9c4b9;
  --wide:84rem;--text:68rem
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:400 1rem/1.6 "Manrope","Segoe UI",sans-serif}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:"Space Grotesk","Segoe UI",sans-serif;letter-spacing:-.045em;line-height:1}
.shell{width:min(var(--wide),calc(100% - 3rem));margin:auto}
.narrow{width:min(var(--text),calc(100% - 3rem));margin:auto}
.cookie-flag{position:absolute;left:-9999px}
.cookie{padding:.5rem 0;background:var(--ink);color:#fff;font-size:.72rem}
.cookie .shell{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.cookie p{margin:0}.cookie a{color:var(--mint)}.cookie label{padding:.15rem .55rem;border:1px solid var(--mint);color:var(--mint);cursor:pointer}
.cookie-flag:checked+.cookie{display:none}
.site-head{position:sticky;top:0;z-index:20;background:rgba(244,240,231,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--ink)}
.site-head .shell{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;min-height:4.8rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:800}
.brand i{display:grid;place-items:center;width:2.6rem;height:2.6rem;background:var(--blue);color:#fff;font-style:normal;border-radius:.5rem 1.4rem .5rem .5rem}
.menu{display:flex;align-items:center;gap:1.4rem;margin:0;padding:0;list-style:none}
.menu a{text-decoration:none;text-transform:uppercase;font-size:.68rem;font-weight:800;letter-spacing:.12em}
.menu .contact{padding:.48rem .9rem;background:var(--coral);border:1px solid var(--ink)}
.tag{display:inline-flex;align-items:center;gap:.55rem;font-size:.67rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.tag:before{content:"";width:1.7rem;height:2px;background:currentColor}
.button{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.25rem;background:var(--ink);color:#fff;text-decoration:none;font-weight:800;border:1px solid var(--ink)}
.button:hover{background:var(--blue)}
.button.light{background:var(--mint);color:var(--ink)}

/* Hero */
.hero{padding:clamp(3.5rem,8vw,7rem) 0 2rem;overflow:hidden}
.hero-grid{display:grid;gap:3rem;align-items:center}
.hero-copy h1{max-width:12ch;margin:1rem 0 1.4rem;font-size:clamp(3.2rem,7vw,7.2rem)}
.hero-copy .lead{max-width:39rem;color:var(--muted);font-size:1.12rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:2rem}
.hero-link{font-weight:800;text-underline-offset:.3rem}
.hero-media{position:relative;min-height:35rem}
.hero-main{position:absolute;inset:0 0 3.5rem 8%;overflow:hidden;border-radius:1rem 8rem 1rem 1rem}
.hero-main img,.hero-note img,.media img,.card-img img,.article-pic img{width:100%;height:100%;object-fit:cover}
.hero-note{position:absolute;left:0;bottom:0;width:37%;aspect-ratio:1;overflow:hidden;border:8px solid var(--cream);transform:rotate(-4deg)}
.hero-stamp{position:absolute;right:-1rem;top:-1rem;display:grid;place-items:center;width:7rem;height:7rem;border-radius:50%;background:var(--mint);font-size:2rem;font-weight:800;transform:rotate(7deg)}
.marquee{display:grid;grid-template-columns:repeat(2,1fr);margin-top:4rem;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.marquee span{padding:1rem;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.marquee span:nth-child(even){border-left:1px solid var(--ink)}

/* Services */
.section{padding:clamp(5rem,10vw,9rem) 0}
.section-head{display:grid;gap:2rem;margin-bottom:3.5rem}
.section-head h2,.split-copy h2,.process h2,.journal h2,.values h2,.faq h2,.contact-band h2{margin:0;font-size:clamp(2.8rem,5.5vw,5.8rem)}
.section-head h2{max-width:12ch}.section-head p{max-width:38rem;color:var(--muted)}
.services{display:grid;border-top:1px solid var(--ink)}
.service{min-height:15rem;padding:1.4rem 1.3rem 2rem 0;border-bottom:1px solid var(--ink)}
.service b{display:block;margin-bottom:3rem;color:var(--blue)}.service h3{font-size:1.5rem}.service p{max-width:18rem;color:var(--muted)}

/* Mobile reality */
.mobile-section{padding:clamp(5rem,10vw,9rem) 0;background:var(--blue);color:#fff;overflow:hidden}
.mobile-grid,.content-grid,.field-grid,.contact-grid{display:grid;gap:4rem;align-items:center}
.split-copy h2{max-width:11ch}.split-copy p{max-width:36rem;color:rgba(255,255,255,.76)}
.mobile-collage{position:relative;min-height:39rem}
.mobile-photo{position:absolute;overflow:hidden;border:8px solid var(--blue)}
.mobile-photo.a{left:0;top:0;width:60%;aspect-ratio:1;border-radius:50%}
.mobile-photo.b{right:0;bottom:0;width:58%;aspect-ratio:4/5;clip-path:polygon(10% 0,100% 8%,90% 100%,0 92%)}

/* Content */
.content-section{padding:clamp(5rem,10vw,9rem) 0;background:var(--ink);color:#fff}
.content-media{position:relative;min-height:35rem}.media{overflow:hidden}
.content-main{position:absolute;inset:0 13% 10% 0;border-radius:0 7rem 0 0}
.content-small{position:absolute;right:0;bottom:0;width:43%;aspect-ratio:1;border:8px solid var(--ink);border-radius:50%}
.content-copy h2{max-width:11ch}.content-copy p{color:rgba(255,255,255,.66);max-width:35rem}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.5rem}.chips span{padding:.4rem .65rem;border:1px solid rgba(255,255,255,.42);font-size:.72rem}

/* Field + process */
.field{padding:clamp(5rem,10vw,9rem) 0}
.field-photo{aspect-ratio:4/3;border-radius:7rem 0 0 0}.field-copy h2{max-width:10ch}.field-copy p{max-width:36rem;color:var(--muted)}
.process{padding:clamp(5rem,10vw,9rem) 0;background:var(--coral)}
.process-head{display:grid;gap:2rem;margin-bottom:3.2rem}
.process-grid{display:grid;gap:3rem}.steps{border-top:1px solid var(--ink)}
.step{display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:1.35rem 0;border-bottom:1px solid var(--ink)}
.step b{color:var(--blue)}.step h3{font-size:1.25rem;margin-bottom:.35rem}.step p{margin:0;max-width:34rem}
.process-photo{aspect-ratio:4/3;clip-path:polygon(0 8%,94% 0,100% 92%,6% 100%)}

/* Statement + Journal */
.statement{position:relative;height:clamp(25rem,50vw,48rem);overflow:hidden}.statement img{width:100%;height:100%;object-fit:cover}
.statement .copy{position:absolute;left:0;bottom:0;width:min(39rem,90%);padding:2rem;background:var(--mint);font:800 clamp(2rem,4vw,4.5rem)/.95 "Space Grotesk"}
.journal{padding:clamp(5rem,10vw,9rem) 0;background:var(--paper)}.journal h2{max-width:12ch;margin-bottom:4rem}
.posts{display:grid;gap:3rem 1.5rem}.post{display:flex;flex-direction:column}.card-img{aspect-ratio:4/3;overflow:hidden;margin-bottom:1rem}
.post:nth-child(2) .card-img{border-radius:7rem 7rem 0 0}.post:nth-child(3) .card-img{clip-path:polygon(0 7%,100% 0,92% 100%,7% 93%)}.post:nth-child(4) .card-img{border-radius:50%}
.post .meta{margin:0 0 .55rem;color:var(--blue);font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.post h3{font-size:1.6rem}.post p:not(.meta){color:var(--muted)}.post a{margin-top:auto;font-weight:800;text-underline-offset:.3rem}

/* Values FAQ contact */
.values{padding:clamp(5rem,10vw,9rem) 0;background:var(--mint)}.values-grid,.faq-grid{display:grid;gap:3rem}.values h2{max-width:11ch}
.value-list{border-top:1px solid var(--ink)}.value{display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:1.35rem 0;border-bottom:1px solid var(--ink)}.value h3{font-size:1.25rem}.value p{margin:0}
.faq{padding:clamp(5rem,10vw,9rem) 0}.faq h2{max-width:9ch}.accordions{border-top:1px solid var(--ink)}
details{padding:1.1rem 0;border-bottom:1px solid var(--ink)}summary{display:flex;justify-content:space-between;gap:1rem;cursor:pointer;font-weight:800;list-style:none}summary:after{content:"+";color:var(--coral);font-size:1.3rem}details[open] summary:after{content:"–"}details p{max-width:40rem;margin:.8rem 0 0;color:var(--muted)}
.notice{padding:2.3rem 0;border-top:1px solid var(--ink);font-size:.86rem;color:var(--muted)}.notice .shell{display:grid;gap:1rem 3rem}.notice strong{color:var(--ink);text-transform:uppercase;letter-spacing:.12em}
.contact-band{padding:clamp(5rem,10vw,9rem) 0;background:var(--blue);color:#fff}.contact-band h2{max-width:11ch}.contact-card{padding:clamp(1.5rem,4vw,3rem);background:var(--mint);color:var(--ink)}
.contact-card a.email{display:block;margin:1rem 0 3rem;font:800 clamp(1.35rem,3vw,2.6rem)/1 "Space Grotesk";word-break:break-word}

/* Interior pages */
.art{padding:clamp(3.5rem,8vw,7rem) 0}.back{font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}
.art h1{max-width:18ch;margin:1.2rem 0;font-size:clamp(2.8rem,6vw,5.6rem)}.art .lede{max-width:42rem;color:var(--muted);font-size:1.15rem}
.article-pic{width:min(100%,60rem);aspect-ratio:16/9;overflow:hidden;margin:2.3rem 0;clip-path:polygon(0 0,96% 0,100% 90%,4% 100%)}
.art>p:not(.lede){max-width:44rem;font-size:1.05rem}.art form{display:grid;gap:.55rem;max-width:42rem;margin-top:2rem;padding:2rem;background:var(--paper);border:1px solid var(--ink)}
label{text-transform:uppercase;font-size:.7rem;font-weight:800;letter-spacing:.1em}input,select,textarea{font:inherit;padding:.7rem;border:0;border-bottom:1px solid var(--ink);background:#fff}button{width:max-content;padding:.8rem 1.1rem;background:var(--mint);border:1px solid var(--ink);font-weight:800}
.form-success{display:none;margin:1.2rem 0;padding:1rem;background:var(--mint);border:1px solid var(--ink);font-weight:800}.form-success:target{display:block}
.site-foot{padding:2.3rem 0;background:var(--ink);color:rgba(255,255,255,.62);font-size:.88rem}.site-foot p{margin:.35rem 0}.site-foot a{color:#fff}

@media(min-width:720px){
  .marquee{grid-template-columns:repeat(4,1fr)}.marquee span+span{border-left:1px solid var(--ink)}
  .services{grid-template-columns:repeat(2,1fr)}.service:nth-child(even){padding-left:1.3rem;border-left:1px solid var(--ink)}
  .posts{grid-template-columns:repeat(2,1fr)}.notice .shell{grid-template-columns:10rem 1fr}
}
@media(min-width:980px){
  .hero-grid{grid-template-columns:1.05fr .95fr}.section-head{grid-template-columns:1fr 1fr}
  .services{grid-template-columns:repeat(4,1fr)}.service+ .service{padding-left:1.3rem;border-left:1px solid var(--ink)}
  .mobile-grid{grid-template-columns:.85fr 1.15fr}.content-grid{grid-template-columns:1.08fr .92fr}
  .field-grid{grid-template-columns:1.08fr .92fr;gap:6rem}.process-head{grid-template-columns:.6fr 1.4fr}.process-grid{grid-template-columns:1fr 1fr;gap:5rem}
  .posts{grid-template-columns:repeat(4,1fr)}.post:nth-child(even){margin-top:3.5rem}
  .values-grid,.faq-grid,.contact-grid{grid-template-columns:1fr 1fr;gap:5rem}
}
@media(max-width:820px){
  .site-head{position:relative}.site-head .shell{flex-wrap:wrap;padding:.7rem 0}.site-head nav{width:100%}.menu{flex-wrap:wrap;gap:.6rem 1rem}
  .hero-media{min-height:27rem}.mobile-collage{min-height:29rem}.content-media{min-height:27rem}
}
@media(max-width:520px){
  .shell,.narrow{width:calc(100% - 1.5rem)}.cookie .shell{align-items:flex-start}.hero{padding-top:2.8rem}.hero-copy h1{font-size:clamp(3rem,16vw,4.5rem)}
  .hero-media{min-height:23rem}.hero-stamp{width:5rem;height:5rem}.mobile-collage{min-height:23rem}.content-media{min-height:23rem}
}

/* Gernerklat signal system — intentionally unlike the other Trusted builds */
:root{
  --ink:#101114;--cream:#eef0eb;--paper:#fff;
  --blue:#6045ff;--coral:#ff5b35;--mint:#d7ff3f;
  --violet:#d9d2ff;--muted:#62656c;--line:#101114
}
body{
  background:var(--cream);font-family:"IBM Plex Sans","Segoe UI",sans-serif;
  background-image:linear-gradient(rgba(16,17,20,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(16,17,20,.045) 1px,transparent 1px);
  background-size:28px 28px
}
h1,h2,h3{font-family:"Syne","Segoe UI",sans-serif;letter-spacing:-.055em}
.shell{width:min(82rem,calc(100% - 3rem))}
.cookie{background:var(--mint);color:var(--ink);border-bottom:1px solid var(--ink)}
.cookie a{color:var(--ink)}.cookie label{border-color:var(--ink);color:var(--ink);background:#fff}
.site-head{position:relative;background:rgba(238,240,235,.96);border-bottom:1px solid var(--ink);backdrop-filter:blur(14px)}
.site-head .shell{min-height:5.2rem}
.brand{font-family:"Syne";font-size:1.05rem}.brand i{width:2.45rem;height:2.45rem;background:var(--ink);border:0;border-radius:0;box-shadow:.42rem .42rem 0 var(--mint)}
.menu{gap:.45rem}.menu a{display:block;padding:.55rem .7rem;border:1px solid transparent;font-size:.64rem}.menu a:hover{border-color:var(--ink);background:#fff}
.menu .contact{padding:.55rem .85rem;background:var(--coral);box-shadow:3px 3px 0 var(--ink)}
.tag{padding:.38rem .55rem;background:var(--mint);border:1px solid var(--ink);letter-spacing:.12em}.tag:before{display:none}
.button{box-shadow:4px 4px 0 var(--coral);transition:transform .15s,box-shadow .15s}.button:hover{background:var(--ink);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--coral)}
.button.light{background:var(--mint);color:var(--ink);box-shadow:4px 4px 0 #fff}

.hero{padding:2.6rem 0 1.2rem}
.hero-grid{position:relative;gap:0;background:var(--ink);color:#fff;border:1px solid var(--ink);box-shadow:12px 12px 0 var(--violet)}
.hero-grid:before{content:"GERNERKLAT / DIGITAL SYSTEM 01";position:absolute;z-index:4;top:.9rem;right:1rem;color:rgba(255,255,255,.55);font:600 .62rem/1 "IBM Plex Mono","Consolas",monospace;letter-spacing:.1em}
.hero-copy{padding:clamp(2rem,5vw,5.2rem)}
.hero-copy h1{max-width:14ch;margin:1.2rem 0 1.5rem;font-size:clamp(3.05rem,4.7vw,5.35rem);line-height:.92}
.hero-copy .lead{max-width:34rem;color:rgba(255,255,255,.7)}
.hero-media{min-height:36rem;border-left:1px solid rgba(255,255,255,.3)}
.hero-main{inset:3.4rem 2.4rem 2.4rem 2.4rem;border:1px solid #fff;border-radius:0}
.hero-main:before,.content-main:before,.process-photo:before,.field-photo:before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:1.65rem;background:var(--paper);border-bottom:1px solid var(--ink)}
.hero-main:after,.content-main:after,.process-photo:after,.field-photo:after{content:"●  ●  ●";position:absolute;z-index:3;left:.55rem;top:.14rem;color:var(--coral);font-size:.68rem;letter-spacing:.15rem}
.hero-main img{padding-top:1.65rem}
.hero-note{left:auto;right:.65rem;bottom:.65rem;width:32%;border:5px solid var(--mint);transform:none;box-shadow:5px 5px 0 var(--ink)}
.hero-stamp{top:1rem;left:1rem;right:auto;width:2.2rem;height:2.2rem;border:1px solid #fff;border-radius:0;background:var(--coral);font-size:.9rem;transform:none}
.marquee{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:2.3rem;border:0}
.marquee span,.marquee span+span,.marquee span:nth-child(even){padding:.65rem .9rem;background:#fff;border:1px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}

.section{padding:clamp(5rem,9vw,8rem) 0}.section-head{align-items:end}.section-head h2,.split-copy h2,.process h2,.journal h2,.values h2,.faq h2,.contact-band h2{font-size:clamp(2.8rem,5vw,5.2rem)}
.section-head h2{max-width:11ch}.section-head>div{padding:1.5rem;background:#fff;border:1px solid var(--ink)}
.services{display:block;border:1px solid var(--ink);background:#fff;box-shadow:10px 10px 0 var(--blue)}
.service,.service:nth-child(even),.service+ .service{display:grid;grid-template-columns:4rem minmax(12rem,.55fr) 1fr;gap:1.5rem;align-items:center;min-height:0;padding:1.35rem 1.5rem;border:0;border-bottom:1px solid var(--ink)}
.service:last-child{border-bottom:0}.service b{margin:0;color:var(--coral);font:700 1rem "IBM Plex Mono","Consolas",monospace}.service h3{margin:0;font-size:1.55rem}.service p{max-width:36rem;margin:0}

.mobile-section{padding:clamp(5rem,9vw,8rem) 0;background:var(--paper);color:var(--ink);border-block:1px solid var(--ink)}
.split-copy p{color:var(--muted)}.mobile-collage{display:grid;grid-template-columns:1.15fr .85fr;gap:1rem;min-height:auto;padding:1rem;background:var(--violet);border:1px solid var(--ink);box-shadow:9px 9px 0 var(--ink)}
.mobile-photo,.mobile-photo.a,.mobile-photo.b{position:relative;inset:auto;width:auto;border:1px solid var(--ink);border-radius:0;clip-path:none}
.mobile-photo.a{aspect-ratio:4/5}.mobile-photo.b{aspect-ratio:4/5;margin-top:4rem}.mobile-photo:before{content:"LIVE CONTEXT";position:absolute;z-index:2;top:.6rem;left:.6rem;padding:.25rem .45rem;background:var(--mint);border:1px solid var(--ink);font:700 .56rem "IBM Plex Mono"}

.content-section{padding:clamp(5rem,9vw,8rem) 0;background:var(--coral);color:var(--ink);border-bottom:1px solid var(--ink)}
.content-media{min-height:34rem}.content-main{inset:0 10% 5rem 0;border:1px solid var(--ink);border-radius:0;box-shadow:8px 8px 0 var(--ink)}
.content-main img{padding-top:1.65rem}.content-small{right:0;bottom:0;width:42%;border:6px solid var(--mint);border-radius:0;box-shadow:6px 6px 0 var(--ink)}
.content-copy{padding:2rem;background:var(--paper);border:1px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.content-copy p{color:var(--muted)}.chips span{background:var(--violet);border-color:var(--ink);font-family:"IBM Plex Mono"}

.field{padding:clamp(5rem,9vw,8rem) 0;background:var(--ink);color:#fff}
.field-grid{padding:1.2rem;border:1px solid rgba(255,255,255,.35)}
.field-photo{position:relative;aspect-ratio:16/10;border:1px solid #fff;border-radius:0;box-shadow:9px 9px 0 var(--blue)}
.field-photo img{padding-top:1.65rem}.field-copy{padding:1rem}.field-copy p{color:rgba(255,255,255,.66)}

.process{padding:clamp(5rem,9vw,8rem) 0;background:var(--violet);border-bottom:1px solid var(--ink)}
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;border:0}.step{display:block;min-height:12rem;padding:1.35rem;background:#fff;border:1px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.step b{display:block;margin-bottom:2.5rem;color:var(--coral);font-family:"IBM Plex Mono"}.step p{color:var(--muted)}
.process-photo{position:relative;aspect-ratio:4/3;border:1px solid var(--ink);clip-path:none;box-shadow:9px 9px 0 var(--coral)}.process-photo img{padding-top:1.65rem}

.statement{width:min(82rem,calc(100% - 3rem));height:clamp(26rem,43vw,40rem);margin:clamp(5rem,9vw,8rem) auto;border:1px solid var(--ink);box-shadow:12px 12px 0 var(--mint)}
.statement:after{content:"SIGNAL / 04";position:absolute;top:1rem;right:1rem;padding:.35rem .55rem;background:var(--ink);color:#fff;font:700 .62rem "IBM Plex Mono"}
.statement .copy{left:1.2rem;bottom:1.2rem;width:min(43rem,calc(100% - 2.4rem));background:var(--paper);border:1px solid var(--ink);box-shadow:6px 6px 0 var(--coral);font-family:"Syne";font-size:clamp(2rem,4vw,4.2rem)}

.journal{background:var(--mint);border-block:1px solid var(--ink)}.posts{gap:1rem}.post{padding:1rem;background:#fff;border:1px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.card-img,.post:nth-child(2) .card-img,.post:nth-child(3) .card-img,.post:nth-child(4) .card-img{aspect-ratio:4/3;border:1px solid var(--ink);border-radius:0;clip-path:none}
.post:nth-child(even){margin-top:0}.post .meta{color:var(--coral);font-family:"IBM Plex Mono"}.post a{padding-top:1rem;border-top:1px solid var(--ink)}

.values{background:var(--paper);border-bottom:1px solid var(--ink)}.value-list{border:1px solid var(--ink);box-shadow:8px 8px 0 var(--coral)}
.value{padding:1.4rem;background:var(--cream);border-bottom:1px solid var(--ink)}.value:last-child{border-bottom:0}.value b{font-family:"IBM Plex Mono";color:var(--blue)}
.faq{background:var(--violet)}.accordions{border:1px solid var(--ink);background:#fff;box-shadow:8px 8px 0 var(--ink)}
details{padding:1.15rem 1.3rem}.notice{background:var(--cream)}
.contact-band{background:var(--ink);color:#fff}.contact-card{background:var(--mint);border:1px solid #fff;box-shadow:10px 10px 0 var(--coral)}
.contact-card a.email{margin:.9rem 0 2.2rem;font-family:"Syne";font-size:clamp(1.05rem,1.9vw,1.75rem);letter-spacing:-.02em;word-break:normal;overflow-wrap:break-word}

.art{margin-top:3rem;margin-bottom:3rem;padding:clamp(2rem,5vw,4.5rem);background:var(--paper);border:1px solid var(--ink);box-shadow:10px 10px 0 var(--violet)}
.art h1{font-size:clamp(2.7rem,5vw,5rem)}.article-pic{position:relative;aspect-ratio:16/9;border:1px solid var(--ink);clip-path:none;box-shadow:8px 8px 0 var(--coral)}
.art form{box-shadow:6px 6px 0 var(--ink)}.site-foot{border-top:1px solid var(--mint)}

@media(min-width:980px){
  .hero-grid{grid-template-columns:1.04fr .96fr}.mobile-grid{grid-template-columns:.9fr 1.1fr}.content-grid{grid-template-columns:1.05fr .95fr}
  .posts{grid-template-columns:repeat(4,1fr)}.service+ .service{padding-left:1.5rem}
}
@media(max-width:820px){
  .site-head .shell{padding:1rem 0}.menu{gap:.2rem}.menu a{padding:.4rem .5rem}
  .hero-grid{box-shadow:6px 6px 0 var(--violet)}.hero-copy{padding:4.5rem 1.3rem 2rem}.hero-copy h1{font-size:clamp(2.8rem,12vw,4.4rem)}
  .hero-media{min-height:27rem;border-top:1px solid rgba(255,255,255,.3);border-left:0}
  .service,.service:nth-child(even),.service+ .service{grid-template-columns:3rem 1fr;padding:1.15rem}.service p{grid-column:2}
  .steps{grid-template-columns:1fr}.field-grid{padding:.7rem}
}
@media(max-width:520px){
  .shell,.narrow,.statement{width:calc(100% - 1.5rem)}.cookie .shell{display:grid}.site-head nav{overflow:visible}
  .hero{padding-top:1rem}.hero-grid:before{left:1.3rem;right:auto}.hero-copy{padding-top:4.2rem}.hero-main{inset:2.8rem .8rem 1rem .8rem}
  .hero-note{width:37%}.marquee{margin-top:1.6rem}.mobile-collage{gap:.55rem;padding:.55rem;box-shadow:5px 5px 0 var(--ink)}
  .mobile-photo.b{margin-top:2rem}.content-main{inset:0 7% 4rem 0}.content-copy{padding:1.3rem}.statement{height:29rem}
  .art{margin-top:1rem;padding:1.3rem;box-shadow:6px 6px 0 var(--violet)}
}