/* site.css - production-only additions (mobile nav, image placeholders) */

/* ---------- hero showcase crossfade ---------- */
/* Slides are stacked in the same box and cross-faded by toggling .on, so one
   is always fading in as the other fades out - no gap where the panel shows
   through. The gradient that used to live here is kept as the .p-shot
   background, so a slow connection still gets brand colour, not a grey hole. */
.p-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.p-slide.on { opacity: 1; }

/* A silently looping animation is exactly what this asks to be spared, so
   hold on the first slide. site.js also stops advancing, but pinning it in
   CSS means it holds even if the JS check is bypassed. */
@media (prefers-reduced-motion: reduce) {
  .p-slide { transition: none; }
  .p-slide:not(:first-child) { display: none; }
  .p-slide:first-child { opacity: 1; }
}

/* ---------- recent work thumbnails ---------- */
/* .proj .shot was built around an absolutely-positioned gradient span; a real
   photo needs to fill the same box and sit under the index, tag and arrow. */
.proj .shot .proj-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }

/* Over a flat gradient the white index numeral read fine; over a real
   screenshot it can land on a pale area and disappear. A scrim across the top
   keeps it legible whatever the photo does. */
.proj .shot::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 42%; z-index: 1;
  background: linear-gradient(180deg, rgba(20,4,8,0.5), transparent);
  pointer-events: none;
}
/* .chip is only defined inside the hero, so this tag was inheriting nothing
   and sitting as bare white text on the image. Matches the showcase pill. */
.proj .shot .tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 6px 12px; border-radius: 100px;
  background: rgba(52,36,42,0.72); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: none; transition: background 0.35s var(--ease);
}
.proj:hover .shot .tag { background: var(--au-pink); }

/* Industry tiles and project cards are anchors now - stop them inheriting
   link underlines or a blue visited colour from the browser default. */
.industry-card, .proj { color: inherit; text-decoration: none; display: block; }

/* ---------- section-head call to action ---------- */
/* .sec-head .right was a bare <p>; it now wraps the copy plus a button. The
   column is right-aligned, so the button needs to be inline-flex to sit with
   the text rather than stretching the full column width. */
/* sections.css already stacks .sec-head and left-aligns .right below 980px,
   so only the button's own spacing is needed here. */
.sec-head .right p { margin: 0; }
.sec-head-cta { margin-top: 20px; display: inline-flex; }

/* ---------- article tables ---------- */
/* A four-column comparison can't shrink to phone width without becoming
   unreadable, so it scrolls inside its own box rather than pushing the whole
   page sideways. min-width keeps the columns legible while it scrolls. */
.art-prose .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.art-prose table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; }
.art-prose th,
.art-prose td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line-2); vertical-align: top; line-height: 1.5; }
.art-prose th {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.art-prose td { color: var(--ink-soft); }
.art-prose td:first-child { color: var(--ink); font-weight: 600; }
.art-prose tbody tr:last-child td { border-bottom: none; }
.art-prose .table-note { font-size: 13px; color: var(--ink-faint); font-style: italic; }

/* ---------- gradient stand-ins for article imagery ---------- */
/* Used where an article has no photograph yet. Inline background supplies the
   gradient; these rules just give it the same footprint a real image gets. */
.art-grad { display: block; }
.art-hero .hero-shot.art-grad { aspect-ratio: 16/8.4; }

/* ---------- article thumbnails (journal index) ---------- */
/* .fa-shot / .rc-shot set the ratio and radius, but the design applied them
   to .ph-block, which brought its own overflow clipping. A real image needs
   that restated or the photo's square corners poke out of the rounded slot. */
.art-thumb { overflow: hidden; background: var(--cream-2); }
.art-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- article hero image ---------- */
/* article.css sizes .hero-shot but styles the rounding on .ph-block, the
   design-time placeholder we don't ship. A real <figure><img> needs the
   radius and clipping restated, plus cover so any source ratio fills the
   band the design specified (16/8.4) instead of letterboxing. */
.art-hero .hero-shot {
  border-radius: 20px;
  overflow: hidden;
  background: var(--cream-2);
}
.art-hero .hero-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- author avatars ---------- */
/* The design shipped these as flat gradient circles standing in for a photo.
   Keeping the gradient as a ring: the element's background becomes the border,
   padding sets its thickness, and the portrait sits inside on its own circle.
   box-sizing is border-box globally, so padding eats inward and the avatar
   keeps the exact footprint the design specified. */
.art-meta .avatar,
.about-author .aa-avatar {
  padding: 2px;
  display: block;
  overflow: hidden;
}
.about-author .aa-avatar { padding: 3px; }
.art-meta .avatar img,
.about-author .aa-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* Sits the photo off the gradient by a hair so the ring reads as a ring
     rather than bleeding into the portrait's own light background. */
  border: 1.5px solid var(--cream);
  display: block;
}
.about-author .aa-avatar img { border-width: 2px; }

/* ---------- article FAQ ---------- */
/* .faq-list is a two-column grid for the wide home page section; inside an
   article's 720px reading column that gives two cramped columns, so drop it
   to one and let the questions run the full measure. */
.art-faq-list { grid-template-columns: 1fr; max-width: none; }
.art-faq-head {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12;
  letter-spacing: -0.01em; margin-bottom: 22px;
}
/* Let the answer grow past the home page's 300px cap - these run longer, and
   a fixed max-height silently clips the overflow rather than scrolling it. */
.art-faq-list .faq-item.open .faq-a { max-height: 460px; }

/* ---------- image placeholders (replaces dev-only image-slot.js) ---------- */
.img-slot {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed rgba(52, 36, 42, 0.28);
  background: repeating-linear-gradient(45deg, rgba(52,36,42,0.05) 0 2px, transparent 2px 10px), var(--cream-2);
}
.img-slot-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); text-align: center; padding: 0 12px;
}

/* ---------- mobile nav burger + menu (nav-links has no equivalent below 980px) ---------- */
.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; background: none; border: none; cursor: pointer; padding: 0; }
.nav-burger span { display: block; width: 100%; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile-menu {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  background: var(--cream); border-bottom: 1px solid var(--line-2);
  display: flex; flex-direction: column;
  padding: 96px var(--gut) 32px;
  transform: translateY(-100%); opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
  pointer-events: none;
}
.nav-mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nav-mobile-menu a {
  font-family: var(--serif); font-size: 22px; padding: 14px 0;
  border-bottom: 1px solid var(--line-2); color: var(--ink);
}
.nav-mobile-menu a:last-child { border-bottom: none; }

@media (max-width: 980px) {
  .nav-burger { display: flex; color: inherit; }
  /* The project CTA moves into the menu on small screens, so the bar holds
     only the wordmark and the burger. */
  .nav-right { display: none; }
}
.nav-mobile-menu .nav-mobile-sub { padding-left: 18px; font-size: 19px; }
.nav-mobile-menu .nd-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--au-pink); margin-right: 14px; vertical-align: middle; }
.nav.over-aurora.menu-open { color: var(--ink); }

/* ---------- ensure the hidden attribute wins over authored display rules ---------- */
.cookie-wrap[hidden], .cookie-prefs-overlay[hidden], .lang-menu[hidden], .lightbox[hidden],
.nav-dropdown-menu[hidden], .ct-sent[hidden] { display: none !important; }

/* The service rows are all anchors now, so they need the colour they were
   inheriting from .svc-row reset explicitly. */
a.svc-row { color: inherit; text-decoration: none; }

/* Anything that navigates should say so on hover. Components that predate
   being links carry their own cursor rules, and the attribute selector
   outranks them without needing to hunt each one down. */
a[href] { cursor: pointer; }

/* The hero impact panel is a link now - it already lifted on hover, it just
   didn't go anywhere. Keeping it a block so the stats grid inside is
   unaffected by the anchor's inline default. */
a.panel { display: block; color: inherit; text-decoration: none; }

/* Numbered items in the Solutions dropdown. */
.nav-dropdown-menu .nd-num {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--ink-faint); margin-right: 10px;
}
/* The trigger is an anchor now, so it needs the link resets the button had. */
a.nav-dropdown-trigger { text-decoration: none; }
/* Hover opens the menu, so bridge the gap beneath the trigger or the pointer
   crosses dead space and the menu closes before it can be reached. */
.nav-dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }

/* ---------- service page ---------- */
/* The hero visual is a padded glass frame; a photo fills it the same way the
   gradient stand-in does, matching the 18px radius the design's slot used. */
.svc-hero-visual img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; display: block; }
.svc-work-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-work-card { color: inherit; text-decoration: none; display: block; }
.svc-work-card h4 { transition: color 0.35s var(--ease); }
.svc-work-card:hover h4 { color: var(--au-pink); }
/* .related-card thumbs on this page are gradients rather than photos. */
.svc-articles .rc-shot { aspect-ratio: 4/3; border-radius: 16px; margin-bottom: 18px; }

/* The nav dropdown sits inside .nav-links, which is hidden on mobile - the
   burger menu carries the service links instead. */
@media (max-width: 980px) {
  .nav-dropdown-menu { display: none !important; }
}