:root{--wordmark:url("/assets/wordmark.svg")}
/* Layout: full-bleed bands that alternate ink, paper and neon. One wide wrapper, serif display type with
   highlighter marks, and the script wordmark bleeding off the band edge the way the brand book cover does. */
:root{
  color-scheme:light;
  --ink:#00272B; --ink-deep:#001A1D; --ink-soft:#0C383D; --line-ink:#1E4C51;
  --neon:#E0FF4F; --neon-deep:#C9EA2E;
  --paper:#FAFBF6; --bone:#EEF1E5; --line:#D3DACB;
  --text:#00272B; --muted:#4A6366; --on-ink:#EEF4E4; --on-ink-muted:#9DB8B5;
  --display:"adobe-jenson-pro","EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --step--1:.875rem; --step-0:1.0625rem; --step-1:1.3rem; --step-2:1.75rem; --step-3:2.4rem;
  --step-4:clamp(2.2rem,4.6vw,3.6rem); --step-5:clamp(2.7rem,7vw,5.8rem);
  --gutter:clamp(16px,4.5vw,56px); --band:clamp(56px,8vw,112px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--neon-deep);outline-offset:3px}
.band--ink :focus-visible,.site-head :focus-visible,.site-foot :focus-visible{outline-color:var(--neon)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:var(--step-5)} h2{font-size:var(--step-4)} h3{font-size:var(--step-2);line-height:1.15} h4{font-size:var(--step-1);line-height:1.2}
p{margin:0;max-width:66ch} ul,ol{margin:0;padding:0}
.speak{margin-top:12px;font-weight:600}
abbr[title]{text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--neon);color:var(--ink);padding:10px 14px;z-index:99;font-weight:600}
.skip:focus{left:8px;top:8px}

/* wrapper + bands */
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:var(--band);position:relative}
.band--ink{background:var(--ink);color:var(--on-ink)}
.band--deep{background:var(--ink-deep);color:var(--on-ink)}
.band--neon{background:var(--neon);color:var(--ink)}
.band--bone{background:var(--bone)}
.band--tight{padding-block:clamp(28px,4vw,48px)}
.stack{display:flex;flex-direction:column;gap:20px}
.stack--lg{gap:clamp(32px,5vw,64px)}
.stack--sm{gap:10px}

/* type helpers */
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.band--ink .eyebrow,.band--deep .eyebrow{color:var(--neon)}
.band--neon .eyebrow{color:var(--ink)}
.lede{font-size:var(--step-1);line-height:1.45;max-width:58ch}
.muted{color:var(--muted)} .band--ink .muted,.band--deep .muted{color:var(--on-ink-muted)}
.small{font-size:var(--step--1)}
mark,.mark{background:linear-gradient(transparent 12%,var(--neon) 12%,var(--neon) 92%,transparent 92%);color:inherit;padding-inline:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.band--ink mark,.band--deep mark{background:none;color:var(--neon);padding:0}
.band--neon mark{background:var(--ink);color:var(--neon)}
.num{font-family:var(--display);font-weight:700;font-variant-numeric:lining-nums tabular-nums}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--ink);color:var(--on-ink);border-bottom:1px solid var(--line-ink)}
.site-head .wrap{display:flex;align-items:center;gap:20px;min-height:68px;flex-wrap:wrap}
.logo{display:block;flex:none;width:168px;aspect-ratio:7/1;background:var(--neon);-webkit-mask:var(--wordmark) center/contain no-repeat;mask:var(--wordmark) center/contain no-repeat}
.logo span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.nav{display:flex;gap:clamp(12px,2vw,26px);margin-left:auto;align-items:center;list-style:none;flex-wrap:wrap}
.nav a{text-decoration:none;font-size:.95rem;padding-block:6px;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--neon)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-ink);color:var(--on-ink);font:600 .9rem var(--sans);padding:9px 14px;cursor:pointer}
@media (max-width:980px){
  .nav-toggle{display:block}
  .nav{display:none;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:2px;padding-bottom:18px;margin-left:0}
  .nav.is-open{display:flex}
  .nav a{font-size:1.1rem;padding-block:9px}
  .nav .btn{margin-top:10px}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;font:600 1rem/1.1 var(--sans);padding:15px 22px;text-decoration:none;border:2px solid var(--ink);background:var(--ink);color:var(--neon);cursor:pointer;transition:transform .15s ease,background .15s ease,color .15s ease}
.btn::after{content:"\2192";transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)} .btn:hover::after{transform:translateX(4px)}
.btn--neon{background:var(--neon);color:var(--ink);border-color:var(--neon)}
.btn--ghost{background:transparent;color:inherit;border-color:currentColor}
.btn--sm{padding:10px 15px;font-size:.92rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.textlink{font-weight:600;text-decoration:none;border-bottom:2px solid var(--neon-deep);padding-bottom:2px}
.band--ink .textlink,.band--deep .textlink{border-bottom-color:var(--neon)}
.band--neon .textlink{border-bottom-color:var(--ink)}
.textlink::after{content:" \2192"}
.textlink{align-self:flex-start}
.door--a .eyebrow{color:var(--neon)}

/* hero */
.hero{padding-block:clamp(48px,7vw,104px) 0;overflow:hidden}
.hero h1{max-width:15ch}
.hero--page{padding-block:clamp(40px,6vw,88px)}
.hero--page h1{font-size:clamp(2.4rem,5.6vw,4.4rem);max-width:20ch}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:end}
.hero-grid>*{min-width:0}
@media (max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.bleed{display:block;width:118%;margin:clamp(36px,6vw,80px) -9% -3.2%;aspect-ratio:7/1;background:var(--neon);-webkit-mask:var(--wordmark) center/contain no-repeat;mask:var(--wordmark) center/contain no-repeat}
.band--neon .bleed{background:var(--ink)}
.crumbs{font-size:var(--step--1);display:flex;flex-wrap:wrap;gap:8px;list-style:none;color:var(--on-ink-muted)}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.6}
.crumbs a{text-decoration:none} .crumbs a:hover{text-decoration:underline}

/* fact strip */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border-top:1px solid var(--line-ink);margin:0}
.facts>div{padding:18px 18px 18px 0;border-bottom:1px solid var(--line-ink)}
.facts dt{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-muted);font-weight:600}
.facts dd{margin:4px 0 0;font-family:var(--display);font-weight:700;font-size:var(--step-2);line-height:1.1}
.band--bone .facts,.band:not(.band--ink):not(.band--deep) .facts{border-color:var(--line)}
.band:not(.band--ink):not(.band--deep) .facts>div{border-color:var(--line)}
.band:not(.band--ink):not(.band--deep) .facts dt{color:var(--muted)}

/* ticker */
.ticker{overflow:hidden;border-block:1px solid var(--line-ink);background:var(--ink-deep);color:var(--on-ink)}
.ticker ul{display:flex;gap:48px;list-style:none;width:max-content;padding-block:16px;animation:tick 48s linear infinite}
.ticker li{font-family:var(--display);font-weight:700;font-size:1.35rem;white-space:nowrap;display:flex;gap:48px;align-items:center}
.ticker li::after{content:"";width:8px;height:8px;background:var(--neon);transform:rotate(45deg)}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker ul{animation:none;flex-wrap:wrap;width:auto;padding-inline:var(--gutter)}html{scroll-behavior:auto}.btn,.btn::after{transition:none}}

/* grids */
.grid{display:grid;gap:clamp(20px,3vw,40px)}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start}
.split>*{min-width:0}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}
.sticky{position:sticky;top:96px}
@media (max-width:860px){.sticky{position:static}}

/* items: ruled, not boxed */
.item{border-top:2px solid currentColor;padding-top:18px;display:flex;flex-direction:column;gap:10px}
.item h3,.item h4{margin:0}
.item p{font-size:1rem}
.item .textlink{align-self:flex-start;margin-top:auto}
.item--k{counter-increment:k}
.item--k::before{content:counter(k,decimal-leading-zero);font-family:var(--display);font-weight:700;font-size:1.1rem}
.steps{counter-reset:k}
.tick{list-style:none;display:flex;flex-direction:column;gap:10px}
.tick li{padding-left:28px;position:relative;max-width:62ch}
.tick li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:8px;border-left:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(-45deg)}
.cross li::before{border:none;width:14px;height:3px;background:currentColor;top:.7em;transform:none}

/* doors (two entrances) */
.door{display:flex;flex-direction:column;gap:16px;padding:clamp(24px,3.4vw,44px);text-decoration:none;min-height:100%}
.door--a{background:var(--ink);color:var(--on-ink)}
.door--b{background:var(--paper);border:2px solid var(--ink)}
.door h3{font-size:var(--step-3)}
.door .go{margin-top:auto;font-weight:600}
.door .go::after{content:" \2192"}
.door:hover .go{text-decoration:underline}

/* case cards */
.case{display:flex;flex-direction:column;gap:12px;text-decoration:none;border-top:2px solid currentColor;padding-top:16px}
.case .big{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,5vw,3.8rem);line-height:.95;font-variant-numeric:lining-nums}
.case .what{font-weight:600}
.case .meta{font-size:var(--step--1);color:var(--muted)}
.band--ink .case .meta{color:var(--on-ink-muted)}
.case{cursor:pointer;transition:transform .15s ease}
.case .go{align-self:flex-start;margin-top:6px;font-weight:600;font-size:.95rem;padding:9px 14px;border:2px solid currentColor;transition:background .15s ease,color .15s ease}
.case .go::after{content:" \2192"}
.case:hover{transform:translateY(-3px)}
.case:hover .go{background:var(--neon);color:var(--ink);border-color:var(--neon)}
.band:not(.band--ink):not(.band--deep) .case:hover .go{background:var(--ink);color:var(--neon);border-color:var(--ink)}
.case:hover h3{text-decoration:underline;text-decoration-thickness:2px}
@media (prefers-reduced-motion:reduce){.case{transition:none}}
.tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none}
.tags li,.tag{font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid currentColor;padding:4px 8px}

/* quote */
.quote{display:flex;flex-direction:column;gap:18px;margin:0}
.quote p{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.2;max-width:28ch;text-wrap:balance}
.quote--sm p{font-size:1.3rem;max-width:34ch}
.quote footer{font-size:var(--step--1)} .quote footer b{display:block;font-size:1rem}

/* answer block for search engines and AI assistants */
.short{background:var(--neon);color:var(--ink);padding:clamp(22px,3vw,36px);display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(14px,3vw,36px);align-items:start}
.short>*{min-width:0}
.short .eyebrow{color:var(--ink);padding-top:.35em}
.short p{font-size:var(--step-1);line-height:1.4;max-width:70ch}
@media (max-width:640px){.short{grid-template-columns:minmax(0,1fr)}}

/* tables */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:1rem}
th,td{text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.band--ink th,.band--ink td{border-color:var(--line-ink)}
th{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
td:first-child{font-weight:600}
.kv{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);margin:0}
.kv dt,.kv dd{padding:12px 0;border-bottom:1px solid var(--line);margin:0}
.kv dt{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding-right:28px;padding-top:16px}
.band--ink .kv dt,.band--ink .kv dd{border-color:var(--line-ink)}

/* faq */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-family:var(--display);font-weight:700;font-size:1.35rem;line-height:1.2;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:1.8rem;font-family:var(--sans);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 22px;display:flex;flex-direction:column;gap:10px}
.band--ink .faq details{border-color:var(--line-ink)}

/* forms */
.form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field legend{font-weight:600;font-size:.95rem}
.field input,.field select,.field textarea{font:inherit;padding:13px 14px;border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:0;width:100%}
.field textarea{min-height:120px;resize:vertical}
fieldset.field{border:0;padding:0;margin:0}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{border:2px solid var(--ink);padding:10px 14px;cursor:pointer;font-weight:400;display:flex;gap:8px;align-items:center}
.opts input{width:auto;accent-color:var(--ink)}
.opts label:has(input:checked){background:var(--ink);color:var(--neon)}
.result{border:2px solid var(--ink);background:var(--neon);padding:22px;display:flex;flex-direction:column;gap:12px}
.note{font-size:var(--step--1);border-left:3px solid var(--neon-deep);padding-left:12px;color:var(--muted)}

/* prose (blog article template, long copy) */
.prose{display:flex;flex-direction:column;gap:18px;max-width:70ch}
.prose h2{font-size:var(--step-3);margin-top:18px} .prose h3{margin-top:10px}
.prose ul{padding-left:1.2em;display:flex;flex-direction:column;gap:8px}

.prose--article{max-width:72ch;margin-inline:auto;font-size:1.08rem}
.prose--article p,.prose--article li{max-width:none}
.prose figure{margin:8px 0}
.prose .ph{aspect-ratio:auto;height:auto}
.prose a{text-decoration:underline;text-decoration-color:var(--neon-deep);text-decoration-thickness:2px}
.prose ol{padding-left:1.3em;display:flex;flex-direction:column;gap:8px}
.take{background:var(--neon);padding:clamp(18px,3vw,28px);display:flex;flex-direction:column;gap:12px}
.take .eyebrow{color:var(--ink)}
.take a{text-decoration-color:var(--ink)}
.box{background:var(--bone);padding:clamp(16px,3vw,24px);display:flex;flex-direction:column;gap:10px}
.prose table{display:block;overflow-x:auto}

/* blog list */
.posts{list-style:none;display:flex;flex-direction:column}
.posts li{border-top:1px solid var(--line);padding:16px 0;display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) minmax(0,120px);gap:16px;align-items:baseline}
.posts li>*{min-width:0}
.posts a{font-family:var(--display);font-weight:700;font-size:1.25rem;line-height:1.2;text-decoration:none}
.posts a:hover{text-decoration:underline}
.posts .cat{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.posts time{font-size:var(--step--1);color:var(--muted);text-align:right}
@media (max-width:700px){.posts li{grid-template-columns:minmax(0,1fr);gap:4px}.posts time{text-align:left}}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{font:600 .9rem var(--sans);border:2px solid var(--ink);background:transparent;color:var(--ink);padding:9px 14px;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--neon)}

/* photography: real team and client imagery */
.ph{display:block;width:100%;object-fit:cover;background:var(--ink-soft)}
.case .ph{aspect-ratio:4/5;margin-bottom:6px;transition:filter .2s ease}
.case{overflow:hidden}
.case:hover .ph{filter:brightness(1.06) saturate(1.08)}
.collage{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:8px}
.collage a{display:block;position:relative;overflow:hidden}
.collage .ph{height:100%;aspect-ratio:4/5;transition:transform .5s ease}
.collage a:hover .ph{transform:scale(1.04)}
.collage a:nth-child(1){grid-column:1/4}.collage a:nth-child(2){grid-column:4/7;margin-top:36px}
.collage a:nth-child(3){grid-column:1/3}.collage a:nth-child(4){grid-column:3/5}.collage a:nth-child(5){grid-column:5/7}
.collage span{position:absolute;left:8px;bottom:8px;background:var(--neon);color:var(--ink);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px}
.reel{overflow:hidden;background:var(--ink-deep)}
.reel ul{display:flex;gap:8px;list-style:none;width:max-content;animation:tick 70s linear infinite}
.reel:hover ul{animation-play-state:paused}
.reel li{width:clamp(180px,22vw,300px);flex:none}
.reel a{display:block;position:relative}
.reel .ph{aspect-ratio:4/5}
.reel span{position:absolute;left:8px;bottom:8px;background:var(--neon);color:var(--ink);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px}
.wide-photo{aspect-ratio:16/9;filter:grayscale(1) contrast(1.05)}
.faces{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;list-style:none}
.faces .ph{aspect-ratio:1}
.person .ph{aspect-ratio:1;margin-bottom:6px}
.case-hero{aspect-ratio:4/5;max-height:640px}
.ig{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px}
.ig a{display:block;position:relative;aspect-ratio:1;background:var(--ink-soft);overflow:hidden;text-decoration:none}
.ig .ph{height:100%;aspect-ratio:1}
.ig .slot{display:flex;align-items:center;justify-content:center;height:100%;border:1px dashed var(--line-ink);color:var(--on-ink-muted);font-size:.8rem;text-align:center;padding:10px}
@media (prefers-reduced-motion:reduce){.reel ul{animation:none;overflow-x:auto;width:auto}.collage .ph{transition:none}}

.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.strip a,.gallery a{display:block;position:relative;overflow:hidden}
.strip .ph,.gallery .ph{aspect-ratio:4/5;transition:transform .5s ease}
.strip a:hover .ph{transform:scale(1.04)}
.strip span{position:absolute;left:8px;bottom:8px;background:var(--neon);color:var(--ink);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px}
@media (max-width:640px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:560px){.gallery{grid-template-columns:minmax(0,1fr)}}
.quote.has-img{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:22px;align-items:start}
.quote.has-img .ph{aspect-ratio:4/5}
@media (max-width:520px){.quote.has-img{grid-template-columns:minmax(0,1fr)}.quote.has-img .ph{max-width:160px}}

/* footer */
.site-foot{background:var(--neon);color:var(--ink);padding-block:clamp(48px,6vw,88px) 0;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:32px}
.foot-grid>*{min-width:0}
.site-foot h2{font-size:1rem;font-family:var(--sans);font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.site-foot ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.site-foot a{text-decoration:none} .site-foot a:hover{text-decoration:underline}
.site-foot address{font-style:normal}
.legal{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;border-top:1px solid var(--ink);margin-top:40px;padding-top:16px;font-size:var(--step--1)}
.site-foot .bleed{background:var(--ink);margin-top:28px}