/* ============================================================
   Gitgit Studio
   Type scale, spacing rhythm and the intro reveal are lifted
   from markbaroth.com (Karla 800 headings / Roboto 20-35 body);
   colour and content come from the Canva mockup.
   ============================================================ */

:root{
  --ink:#0b0b1f;
  --blue:#207bbe;
  --blue-dark:#1a6aa5;
  --blue-tint:#d3e2ee;
  --cream:#f9f6f0;
  --white:#fff;
  /* Layout system measured off markbaroth.com:
     container-large 1280px, padding-global 40px,
     padding-section-huge 96px, spacing scale 24/32/48/64/96. */
  --shell:1280px;
  --gutter:40px;
  --s-sm:24px;
  --s-md:32px;
  --s-lg:48px;
  --s-xl:64px;
  --s-2xl:96px;
  /* Intro timings measured off markbaroth.com's IX2 timeline:
     plates hold ~1.0s, then slide a half-viewport apart over ~0.7s
     on an ease-out. Swap --intro-bg to #000 for a black plate. */
  --intro-bg:#fff;
  --intro-hold:650ms;
  --intro-fade:400ms;
  --intro-open:700ms;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;   /* clears the sticky nav on anchor jumps */
}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:20px;
  line-height:35px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{
  font-family:"Karla",system-ui,sans-serif;
  font-weight:800;
  text-transform:uppercase;
  margin:0;
}
h1{font-size:clamp(38px,5.6vw,80px);line-height:1.25}
h2{font-size:clamp(34px,4.6vw,64px);line-height:1.35}
h3{font-size:20px;line-height:30px}
p{margin:0 0 24px}

.shell{width:100%;max-width:calc(var(--shell) + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--s-2xl) 0}

/* ---------- buttons ---------- */
/* button system copied off the reference: 20px/400, 8px radius,
   solid 12px 32px, outlined 10px 30px with a 2px rule */
.btn{
  display:inline-block;
  font-size:20px;line-height:35px;
  font-weight:400;
  padding:12px 32px;
  border-radius:8px;
  border:0 solid transparent;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--blue);color:#fff}
.btn-solid:hover{background:var(--blue-dark)}
.btn-ghost{padding:10px 30px;border:2px solid #fff;color:#fff}
.btn-ghost:hover{background:#fff;color:var(--ink)}
.btn-outline{padding:10px 30px;border:2px solid var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-tint{background:#fff;color:var(--blue)}
.btn-tint:hover{background:var(--blue-tint)}

/* ---------- intro: logo holds, fades, then the plates slide apart ----------
   Mirrors markbaroth.com's `animation-window is-left / is-right`: two
   plates that translate a half-viewport in opposite directions over
   ~0.7s on an ease-out, uncovering a page already painted underneath.
   The logo clears first, so the split reads as one clean movement. */
#intro{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  background:transparent;
}
#intro .half{
  position:absolute;top:0;bottom:0;
  width:calc(50% + 1px);   /* 1px overlap — no seam on odd viewport widths */
  background:var(--intro-bg);
}
#intro .half.l{left:0}
#intro .half.r{right:0}

#intro img{
  position:relative;z-index:1;
  width:min(46vw,430px);height:auto;
  will-change:transform,opacity;
}
/* logo draws inward on itself, then the plates cut away */
.js #intro img{
  animation:introLogoOut var(--intro-fade) cubic-bezier(.4,0,.68,.06) forwards;
  animation-delay:var(--intro-hold);
}

.js.reveal #intro .half.l{animation:curtainL var(--intro-open) cubic-bezier(.25,.46,.45,.94) forwards}
.js.reveal #intro .half.r{animation:curtainR var(--intro-open) cubic-bezier(.25,.46,.45,.94) forwards}
#intro.done{display:none}

@keyframes introLogoOut{
  from{opacity:1;transform:scale(1)}
  to{opacity:0;transform:scale(.72)}
}
@keyframes curtainL{to{transform:translateX(-100%)}}
@keyframes curtainR{to{transform:translateX(100%)}}

/* page sits still behind the curtain, then its hero copy staggers in */
.js .hero-in{opacity:0;transform:translateY(22px)}
.js.revealed .hero-in{
  opacity:1;transform:none;
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);
}
.js.revealed .hero-in:nth-child(2){transition-delay:.12s}
.js.revealed .hero-in:nth-child(3){transition-delay:.24s}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:var(--cream);
  border-bottom:1px solid rgba(11,11,31,.07);
}
.nav .shell{display:flex;align-items:center;gap:28px;height:88px}
.nav-logo img{height:52px;width:auto}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:34px}
.nav-links a:not(.btn){
  font-size:20px;
  padding:4px 0;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease,color .2s ease;
}
.nav-links a:not(.btn):hover{border-bottom-color:var(--ink)}
.nav-toggle{display:none;background:none;border:0;padding:9px;margin-left:auto;cursor:pointer}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--ink);margin:5px 0}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:calc(100vh - 88px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  color:#fff;
  background:#333 url("/images/hero.jpg?v=4464a99c") center/cover no-repeat;
}
.hero::after{content:"";position:absolute;inset:0;background:rgba(8,10,14,.5)}
.hero .shell{position:relative;z-index:1;max-width:900px}
/* the hero statement is the page h1; it keeps body typography rather
   than the uppercase Karla treatment the other headings use */
.hero-title{
  font-family:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;
  text-transform:none;
  font-size:clamp(22px,2.6vw,34px);
  line-height:1.5;
  margin:0 auto var(--s-md);
  max-width:760px;
}

/* ---------- about ---------- */
.about{background:var(--cream)}
.about-grid{
  display:grid;
  grid-template-columns:1fr minmax(280px,400px);
  gap:var(--s-xl);align-items:start;
}
.about h2{margin-bottom:var(--s-md)}
.about h2 em{font-style:italic;color:var(--blue);font-weight:800}
.about-photo{overflow:hidden}
.about-photo img{width:100%;height:100%;object-fit:cover}

/* client logo wall */
.clients{margin-top:var(--s-2xl)}
/* section scale, flush to the shell margin — the same line "MEET GITA"
   sits on, so the two headings in this section share one left edge */
.clients-title{
  font-size:clamp(34px,4.6vw,64px);
  line-height:1.35;
  margin-bottom:var(--s-lg);
}
/* reference uses 5 fixed columns at 24px; wrapping flex keeps that
   rhythm but centres a short final row instead of stranding it left */
.clients-grid{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;
  gap:var(--s-md) var(--s-sm);
}
/* uniform optical box — the marks vary wildly in aspect ratio */
.clients-grid a{display:block}
.clients-grid a:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
.clients-grid img{
  width:193px;height:80px;
  object-fit:contain;object-position:center;
  transition:transform .3s ease;
}
.clients-grid a:hover img{transform:scale(1.05)}

/* ---------- services ---------- */
.services{background:var(--blue);color:#fff}
.services h2{color:#fff;margin-bottom:var(--s-lg)}
/* 3 across, matching the reference's services grid (64px / 32px) */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-xl) var(--s-md)}
.service h3{display:flex;align-items:center;gap:12px;margin-bottom:var(--s-sm)}
.service h3 svg{width:24px;height:24px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7}
.service .body{padding-left:36px}
.service p{color:rgba(255,255,255,.94)}

/* ---------- portfolio ---------- */
.work{background:var(--cream)}
.case{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s-xl);align-items:center;
  margin-bottom:var(--s-2xl);
}
.case:last-child{margin-bottom:0}
.case-media{overflow:hidden}
/* square, like the rest of the work imagery — the height attribute has to be
   released or the browser resolves it and ignores the ratio */
.case-media img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.case-media:hover img{transform:scale(1.04)}
.case h2{margin-bottom:24px}
/* .flip cases put the media first in the DOM — desktop order needs no override */

/* ---------- cta ---------- */
.cta{
  position:relative;color:#fff;
  background:#222 url("/images/cta.jpg?v=c22168f9") center/cover no-repeat;
  padding:calc(var(--s-2xl) + var(--s-md)) 0;
}
.cta::after{content:"";position:absolute;inset:0;background:rgba(8,10,14,.46)}
.cta .shell{position:relative;z-index:1}
.cta h2{color:#fff;margin-bottom:var(--s-sm);max-width:900px}
.cta p{max-width:560px}

/* ---------- footer ---------- */
.footer{background:var(--cream);padding:var(--s-2xl) 0 var(--s-lg)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-lg)}
.footer-logo img{height:64px;width:auto;margin-bottom:var(--s-sm)}
/* footer links carry vertical padding so every tap target clears 44px */
.footer-mail{display:inline-flex;align-items:center;gap:12px;color:var(--blue);padding:8px 0}
.footer-mail svg{width:26px;height:26px;fill:var(--blue);flex:none}
.footer-mail span{border-bottom:1px solid transparent;transition:border-color .2s ease}
.footer-mail:hover span{border-bottom-color:var(--blue)}
.footer h4{font-size:22px;color:var(--blue);margin-bottom:12px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:0}
.footer li a{
  display:inline-block;padding:10px 0;
  color:var(--blue);
  border-bottom:1px solid transparent;transition:border-color .2s ease;
}
.footer li a:hover{border-bottom-color:var(--blue)}
.footer li a.muted{color:#6b6b78}
.footer-base{
  margin-top:64px;padding-top:26px;
  border-top:1px solid rgba(11,11,31,.1);
  font-size:16px;color:#6b6b78;
}

/* ---------- scroll reveal ---------- */
.js .up{opacity:0;transform:translateY(30px)}
.js .up.seen{
  opacity:1;transform:none;
  transition:opacity .75s ease,transform .75s cubic-bezier(.22,1,.36,1);
}

/* ---------- responsive ---------- */
/* services steps 3 -> 2 -> 1 on its own breakpoints so the cards
   never squeeze before the rest of the layout needs to move */
@media (max-width:1080px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .services-grid{grid-template-columns:1fr}
}

@media (max-width:960px){
  :root{--gutter:26px;--s-2xl:72px;--s-xl:48px}
  body{font-size:18px;line-height:31px}
  .about-grid{grid-template-columns:1fr}
  .about-photo{max-width:380px}
  .clients-grid img{width:150px;height:64px}
  .case{grid-template-columns:1fr;gap:var(--s-md)}
  /* stacked: lead with the heading whichever way the desktop row runs */
  .case.flip .case-copy{order:1}
  .case.flip .case-media{order:2}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s-md)}
  .footer-logo{grid-column:1/-1}

  .nav-toggle{display:block}
  .nav-links{
    position:absolute;left:0;right:0;top:88px;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);
    border-bottom:1px solid rgba(11,11,31,.08);
    padding:10px var(--gutter) 24px;
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a:not(.btn){padding:14px 0}
  .nav-links .btn{margin-top:12px;text-align:center}
}
@media (max-width:520px){
  .clients-grid img{width:132px;height:56px}
  .hero{min-height:calc(100vh - 88px);padding:80px 0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .up,.js .hero-in{opacity:1;transform:none}
}

/* ============================================================
   Inner pages — service, case study, portfolio, about, contact.
   Everything below reuses the shell / spacing / button system
   above; no page introduces its own layout primitives.
   ============================================================ */

/* ---------- shared eyebrow ---------- */
.eyebrow{
  font-size:16px;line-height:26px;
  letter-spacing:.12em;text-transform:uppercase;
  color:#6b6b78;
  margin:0 0 10px;
}
.on-blue .eyebrow,.page-hero .eyebrow{color:rgba(255,255,255,.82)}

/* ---------- inner-page hero (blue plate) ---------- */
/* Inner pages open on the brand blue instead of the home photo hero,
   so the sticky cream nav still reads against the page beneath it. */
.page-hero{background:var(--blue);color:#fff;padding:var(--s-2xl) 0}
.page-hero h1{color:#fff;font-size:clamp(34px,4.6vw,64px);line-height:1.35;margin-bottom:var(--s-md)}
.page-hero p{color:rgba(255,255,255,.94);max-width:640px}
.page-hero .btn-tint{margin-top:8px}
/* case studies pair the intro copy with the project's lead image */
.hero-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-xl);align-items:start}
.hero-split .hero-media{overflow:hidden}
.hero-split .hero-media img{width:100%;height:100%;object-fit:cover}

/* ---------- results / stat blocks ---------- */
.results{margin-top:var(--s-2xl)}
.results + .results{margin-top:var(--s-xl)}
.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-lg) var(--s-xl);align-items:start}
.results h2{color:#fff}
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-md) var(--s-lg)}
.stat b{
  display:block;
  font-family:"Karla",system-ui,sans-serif;font-weight:800;
  font-size:clamp(32px,3.6vw,50px);line-height:1.15;
}
.stat span{display:block;font-size:16px;line-height:24px;opacity:.88}

/* ---------- two-column prose (APPROACH / SUMMARY / GET IN TOUCH) ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-xl);align-items:start}
.duo > :last-child > :last-child{margin-bottom:0}

/* ---------- feature: heading over a copy + media row ---------- */
.feature h2{margin-bottom:var(--s-lg)}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-xl);align-items:start}
.feature-media{overflow:hidden}
.feature-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.feature-grid > div > :last-child{margin-bottom:0}

/* ---------- social embeds (CONTENTS) ---------- */
/* Plain iframes rather than each platform's SDK: no third-party script,
   no consent shim, and one lazy-loaded frame per post. */
.embeds{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-md);margin-top:var(--s-lg)}
.embeds.cols-3{grid-template-columns:repeat(3,1fr)}
.embeds.stack{grid-template-columns:1fr;max-width:640px}
.embed{
  background:rgba(255,255,255,.1);
  overflow:hidden;
  height:var(--embed-h,720px);
}
.embed iframe{display:block;width:100%;height:100%;border:0}

/* ---------- imagery grid ---------- */
.imagery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-sm);margin-top:var(--s-lg)}
.imagery-grid img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}

/* ---------- card grid (portfolio + "you might also like") ---------- */
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-lg) var(--s-md)}
.card{display:block}
.card-media{overflow:hidden;margin-bottom:18px}
.card-media img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.card:hover .card-media img{transform:scale(1.04)}
.card .eyebrow{margin-bottom:4px}
.card h3{font-size:22px;line-height:30px}
.card:focus-visible{outline:2px solid currentColor;outline-offset:8px}

/* ---------- previous / next ---------- */
.pagenav{background:var(--cream);padding:var(--s-2xl) 0}
.pagenav-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-xl);align-items:start}
.pagenav .label{
  font-family:"Karla",system-ui,sans-serif;font-weight:800;
  font-size:16px;line-height:26px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);margin:0 0 var(--s-sm);
  padding-bottom:10px;border-bottom:1px solid rgba(11,11,31,.12);
}
.pagenav .card-media{max-width:260px}
.pagenav-cta h2{font-size:clamp(28px,3.2vw,44px);margin-bottom:var(--s-sm)}
.pagenav-cta p{max-width:420px}

/* ---------- blue band wrapper (services cross-sell, related work) ---------- */
.on-blue{background:var(--blue);color:#fff}
.on-blue h2,.on-blue h3{color:#fff}
.on-blue p{color:rgba(255,255,255,.94)}

/* ---------- contact ----------
   No form: the address itself is the contact method, so it sits with the
   invitation in the hero rather than in a near-empty section under it. */
.hero-duo .lede{color:rgba(255,255,255,.92);max-width:34ch;margin-top:var(--s-sm)}
.mail-lead{
  display:inline-flex;align-items:center;gap:14px;
  color:#fff;
  font-size:clamp(19px,1.9vw,26px);line-height:1.5;
  padding:10px 0;
}
.mail-lead svg{width:28px;height:28px;fill:#fff;flex:none}
.mail-lead span{border-bottom:1px solid rgba(255,255,255,.55);transition:border-color .2s ease;word-break:break-word}
.mail-lead:hover span{border-bottom-color:#fff}

/* ---------- split hero (contact) ---------- */
.hero-duo{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:520px}
.hero-duo .copy{background:var(--blue);color:#fff;display:flex;align-items:center;padding:var(--s-2xl) 0}
.hero-duo .copy .inner{
  width:100%;max-width:calc(var(--shell) / 2);
  margin-left:auto;padding:0 var(--s-lg) 0 var(--gutter);
}
.hero-duo h1{color:#fff}
.hero-duo .shot{overflow:hidden}
.hero-duo .shot img{width:100%;height:100%;object-fit:cover;object-position:center 22%}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .cardgrid{grid-template-columns:repeat(2,1fr)}
  .embeds.cols-3{grid-template-columns:repeat(2,1fr)}
  .imagery-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .hero-split,.results-grid,.duo,.feature-grid,.pagenav-grid{grid-template-columns:1fr}
  .hero-split .hero-media,.feature-media{max-width:420px}
  .hero-duo{grid-template-columns:1fr;min-height:0}
  .hero-duo .copy .inner{max-width:none;margin:0;padding:0 var(--gutter)}
  .hero-duo .shot{aspect-ratio:16/10}
  .pagenav .card-media{max-width:220px}
  /* Next reads before Previous once the pair stacks — it is the
     forward path through the work, and Previous is the way back. */
  .pagenav-next{order:1}
  .pagenav-prev{order:2}
}
@media (max-width:720px){
  .embeds,.embeds.cols-3{grid-template-columns:1fr;max-width:520px}
  .cardgrid{grid-template-columns:1fr;max-width:420px}
  .imagery-grid{grid-template-columns:repeat(2,1fr)}
  .stat-grid{gap:var(--s-sm) var(--s-md)}
}

/* two-up variant of the services grid, used by "looking for something else?" */
.services-grid.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:720px){.services-grid.two{grid-template-columns:1fr}}

/* ---------- small layout modifiers ---------- */
/* Portfolio leads with a centred statement; every other heading on the site
   sits on the shell's left margin. */
.shell.center{text-align:center}
.shell.center p{max-width:660px;margin-left:auto;margin-right:auto}
/* a section that butts straight up against the band above it */
.section.tight-top{padding-top:0}

/* the About page reuses the home "Meet Gita" block, with an h1 in place of h2 */
.about h1{font-size:clamp(34px,4.6vw,64px);line-height:1.35;margin-bottom:var(--s-md)}
.about h1 em{font-style:italic;color:var(--blue);font-weight:800}

/* A gallery slot whose photo has not been supplied yet. Holds the grid's
   shape and names the shot, instead of rendering a broken image. */
.imagery-slot{
  aspect-ratio:3/4;
  background:rgba(255,255,255,.09);
  border:1px dashed rgba(255,255,255,.34);
  display:flex;align-items:center;justify-content:center;
  padding:20px;text-align:center;
}
.imagery-slot span{font-size:15px;line-height:23px;color:rgba(255,255,255,.72)}

/* A clients wall that opens its own section carries no extra top margin —
   it only needs the gap when it follows the About block on the home page. */
.section.tight-top .clients{margin-top:0}
/* a block set apart from the one above it inside the same section */
.results-grid.spaced{margin-top:var(--s-2xl)}

/* ---------- services menu ----------
   There is no Services page; the trigger opens the three service pages
   directly. Hover opens it on a pointer device, click opens it everywhere,
   and it collapses into the stacked mobile nav below 960px.
   The media queries below are deliberately flat: a nested @media loses its
   outer condition when the sheet is flattened, which leaked the desktop
   hover rule into every width and hid the menu on hover. */
.has-menu{position:relative}
.menu-trigger{
  display:flex;align-items:center;gap:7px;
  font:inherit;font-size:20px;
  color:inherit;background:none;border:0;
  padding:4px 0;margin:0;cursor:pointer;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.menu-trigger svg{
  width:16px;height:16px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s ease;
}
.menu-trigger:hover{border-bottom-color:var(--ink)}
.has-menu.open > .menu-trigger svg{transform:rotate(180deg)}
.menu{
  list-style:none;margin:0;padding:14px 0;
  position:absolute;top:calc(100% + 18px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:266px;
  background:var(--cream);
  box-shadow:0 18px 44px rgba(11,11,31,.16);
  opacity:0;visibility:hidden;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:70;
}
.has-menu.open > .menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-links .menu a{
  display:block;
  padding:12px 26px;
  font-size:18px;line-height:28px;
  border-bottom:0;
  transition:background-color .18s ease;
}
.nav-links .menu a:hover{background:rgba(32,123,190,.09);border-bottom:0}
.nav-links .menu a[aria-current]{color:var(--blue)}

/* hover opens it only where there is a real pointer and room for a popover */
@media (hover:hover) and (min-width:961px){
  .has-menu:hover > .menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  .has-menu:hover > .menu-trigger svg{transform:rotate(180deg)}
}

/* A round mark loses most of its box to its own whitespace, so it reads far
   smaller than the wordmarks beside it; a taller box evens them out. */
.clients-grid img.lg{height:106px}

/* Case heroes share one image block, so the pages line up with each other
   whatever shape the client's photo happens to be. */
.hero-split .hero-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* stacked nav: the menu is an inline list rather than a popover */
@media (max-width:960px){
  .has-menu{width:100%}
  .menu-trigger{width:100%;justify-content:space-between;padding:14px 0;font-size:20px}
  .menu{
    position:static;transform:none;min-width:0;
    background:none;box-shadow:none;
    padding:0;
    display:none;
    opacity:1;visibility:visible;
  }
  .has-menu.open > .menu{display:block;padding:0 0 6px;transform:none}
  .nav-links .menu a{padding:11px 0 11px 18px;font-size:18px}
  .nav-links .menu a:hover{background:none}
}
@media (max-width:520px){
  .clients-grid img.lg{height:80px}
}

/* the trigger for the section you are currently in */
.has-menu.current > .menu-trigger{border-bottom-color:var(--ink)}

/* The card grid needs the same breathing room under its heading that
   Contents and Imagery already have — it was sitting flush against it. */
.cardgrid{margin-top:var(--s-lg)}

/* One gallery frame runs across two columns of the imagery grid. It takes its
   height from the ordinary tile beside it rather than its own ratio. */
.imagery-grid .wide{grid-column:span 2;aspect-ratio:auto;height:100%}
@media (max-width:1080px){
  /* at two columns a spanning frame would be the whole row, so let it sit
     as a normal tile instead */
  .imagery-grid .wide{grid-column:auto;aspect-ratio:3/4}
}

/* A gallery frame holding a square photograph is shown square, rather than
   cropped to the portrait ratio the rest of the grid uses. */
.imagery-grid .square{aspect-ratio:1/1}

/* A card grid that opens its own section needs no top margin — it only wants
   the gap when it follows a heading. */
.section.tight-top .cardgrid{margin-top:0}

/* An intro that runs straight into a grid does not need a full section's
   worth of padding under it. */
.page-hero.tight-bottom{padding-bottom:var(--s-md)}