/* =========================================================
   Jonathan Atkinson — redesign (2026-10-23)
   New direction (replaces the Rams/Swiss mockups). Standalone,
   does NOT use the old shared.css. Font: Inter (placeholder for
   whatever Jonathan lands on). Colours sampled from the supplied
   design JPGs — to be fine-tuned live in the pane.
   ========================================================= */

:root{
  --bg:          #FFFFFF;   /* white page ground */
  --bg-card:     #FFFFFF;
  --ink:         #16181C;   /* near-black headline / dark text */
  --ink-soft:    #2A2D33;
  --grey:        #A2A6AC;   /* second-line headline grey */
  --muted:       #5C6066;   /* body copy */
  --line:        #DEDDD8;   /* hairline on light */
  --dark:        #0B0F17;   /* dark band / dark card */
  --dark-soft:   #121826;
  --dark-line:   #2A3140;
  --tint:        #F1F6FC;   /* pale blue section ground */
  --on-dark:     #EDEEF0;
  --on-dark-mut: #9AA0AA;
  --orange:      #F2600C;   /* the single accent orange — used everywhere */
  --maxw:        1240px;
  --pad:         40px;
  --radius:      18px;
}

*{ box-sizing:border-box; }
/* links get the hand from the browser; buttons don't, so say it once for all of them */
button:not(:disabled){ cursor:pointer; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",-apple-system,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{ color:inherit; }
img{ display:block; max-width:100%; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

/* ---------- shared bits ---------- */
.eyebrow{
  display:flex; align-items:center; gap:1rem;
  font-size:0.72rem; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--muted);
}
.eyebrow .eb-line{ flex:1; max-width:120px; height:1px; background:var(--line); }
.eyebrow-light{ color:var(--on-dark-mut); }
.eyebrow-light .eb-line{ background:var(--dark-line); }

/* orange pill button */
.btn-primary{
  display:inline-flex; align-items:center; gap:0.7rem;
  background:var(--orange); color:#fff;
  font-size:0.95rem; font-weight:600; text-decoration:none;
  padding:0.95rem 1.6rem; border-radius:999px;
  box-shadow:0 10px 24px -10px rgba(242,96,12,0.6);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary svg{ width:18px; height:18px; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(242,96,12,0.7); }

/* plain text link */
.btn-text{
  font-size:0.95rem; font-weight:500; text-decoration:none;
  padding-bottom:2px; border-bottom:1.5px solid var(--ink);
  transition:color 0.2s ease, border-color 0.2s ease;
}
.btn-text:hover{ color:var(--orange); border-color:var(--orange); }

/* arrow text link */
.link-arrow{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-size:0.9rem; font-weight:600; text-decoration:none;
  padding-bottom:3px; border-bottom:1.5px solid var(--orange);
  transition:color 0.2s ease;
}
.link-arrow svg{ width:16px; height:16px; color:var(--orange); }
.link-arrow:hover{ color:var(--orange); }
.link-arrow-light{ color:var(--on-dark); }
/* underline drawn by scroll (see the inline script in project-digital-products.html); --draw is 0..1, defaults to fully drawn */
.link-arrow--draw{ position:relative; border-bottom:none; }
.link-arrow--draw::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--orange);
  transform:scaleX(var(--draw,1)); transform-origin:left center;
}

/* circular arrow button */
.btn-circle{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink);
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn-circle svg{ width:19px; height:19px; }
.btn-circle:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ============ HEADER ============ */
/* overlays the hero so the hero art can run up behind the nav */
.site-header{ position:absolute; top:0; left:0; right:0; z-index:20; }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:1.9rem; padding-bottom:1.9rem;
}
.brand{ font-size:1.05rem; font-weight:700; letter-spacing:-0.01em; text-decoration:none; }
.main-nav{ display:flex; align-items:center; gap:2.4rem; }
.main-nav a:not(.btn-circle){
  font-size:0.92rem; font-weight:500; text-decoration:none; color:var(--ink-soft);
  transition:color 0.2s ease;
}
.main-nav a:not(.btn-circle):hover{ color:var(--orange); }

/* ============ HERO ============ */
.hero{ position:relative; overflow:hidden; }
.hero-art{
  position:absolute; top:0; right:0; bottom:0;
  width:90%; max-width:none; height:100%;
  object-fit:cover; object-position:82% center;
  z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 24%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 24%);
}
.hero-inner{ position:relative; z-index:1; padding-top:8.5rem; padding-bottom:7rem; }
.hero-copy{ max-width:620px; }
.hero-title{
  margin:1.8rem 0 0;
  font-size:clamp(2.8rem, 5.6vw, 4.6rem);
  font-weight:700; line-height:1.03; letter-spacing:-0.03em;
}
.hero-title span{ display:block; }
.hero-title .t-dark{ color:var(--ink); }
.hero-title .t-grey{ color:var(--grey); }
.hero-sub{
  margin:2rem 0 0; max-width:34rem;
  font-size:1.06rem; line-height:1.6; color:var(--muted);
}
.hero-sub strong{ color:var(--ink); font-weight:700; }
.hero-actions{ display:flex; align-items:center; gap:1.8rem; margin-top:2.4rem; }

/* ============ ABOUT ============ */
.about{ position:relative; overflow:hidden; background:var(--dark); color:var(--on-dark); }
/* composed dark-left / portrait-right background, supplied as one image */
.about-bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center right;
}
/* left-weighted wash guarantees copy legibility over the image (desktop + mobile) */
.about::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(11,15,23,0.78) 0%, rgba(11,15,23,0.28) 42%, rgba(11,15,23,0) 66%);
}
.about-inner{ position:relative; z-index:2; padding-top:5rem; padding-bottom:5.5rem; }
.about-grid{
  display:grid; grid-template-columns:1.1fr 1fr; gap:3.5rem;
  margin-top:3rem; max-width:62%;
}
.about-title{
  margin:0; font-size:clamp(1.9rem, 3vw, 2.5rem);
  font-weight:700; line-height:1.15; letter-spacing:-0.02em;
}
.about-title .accent{ color:var(--orange); }
.about-body p{ margin:0 0 1.8rem; font-size:0.98rem; line-height:1.7; color:var(--on-dark-mut); }

/* ============ SELECTED WORK ============ */
.work{ padding:6rem 0 6.5rem; }
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.work-grid{
  display:grid; grid-template-columns:1.55fr 1fr; gap:1.4rem;
  margin-top:2.8rem;
}
.work-col{ display:grid; grid-template-rows:1fr 1fr; gap:1.4rem; }

.card{
  position:relative; overflow:hidden; text-decoration:none;
  border-radius:var(--radius); padding:2.1rem;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:230px; isolation:isolate;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -24px rgba(16,20,30,0.4); }
.card-lg{ min-height:496px; }
.card-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; }
.card-title{ margin:0; font-size:1.6rem; font-weight:700; line-height:1.08; letter-spacing:-0.02em; }
.card-sm .card-title{ font-size:1.4rem; }
.card-meta{ margin:0.7rem 0 0; font-size:0.84rem; color:var(--muted); }
.card-num{ font-size:0.9rem; font-weight:600; opacity:0.7; }
.card-logo{ width:34px; height:34px; color:var(--ink); opacity:0.85; }
.card-logo svg{ width:100%; height:100%; fill:currentColor; }

/* card surfaces (gradient placeholders standing in for real art) */
.card-blue{ color:var(--ink); background:#EEF1F6 url("images/work-1.webp") center/cover no-repeat; }
.card-dark{ color:var(--on-dark); background:#0A0E17 url("images/work-2.webp") center/cover no-repeat; }
.card-dark .card-num{ color:var(--on-dark-mut); opacity:1; }
.card-orange{ color:var(--ink); background:#F3F2EF url("images/work-3.webp") center/cover no-repeat; }
/* arrow button contrast per card */
.card-dark .card-arrow{ border-color:var(--dark-line); color:var(--on-dark); }
.card-dark .card-arrow:hover{ background:#fff; color:var(--dark); border-color:#fff; }
.card-blue .card-arrow, .card-orange .card-arrow{ border-color:rgba(22,24,28,0.25); background:rgba(255,255,255,0.4); }

/* ============ CONTACT / CTA ============ */
.cta{
  position:relative; overflow:hidden;
  background:#0A0E16 url("images/footer-mountains.webp") center/cover no-repeat;
  color:var(--on-dark);
}
.cta::before{ /* legibility wash over the photo, left-weighted */
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg, rgba(8,11,18,0.94) 0%, rgba(8,11,18,0.72) 42%, rgba(8,11,18,0.28) 100%);
}
.cta-inner{
  position:relative; z-index:1;
  display:flex; align-items:flex-end; justify-content:space-between; gap:3rem;
  padding-top:6.5rem; padding-bottom:6.5rem;
}
.cta-title{ margin:1.6rem 0 0; font-size:clamp(2.2rem, 4vw, 3.3rem); font-weight:700; letter-spacing:-0.025em; line-height:1.05; }
.cta-sub{ margin:1.1rem 0 0; max-width:34rem; font-size:1.02rem; color:var(--on-dark-mut); }
.cta-side{ display:flex; flex-direction:column; align-items:flex-start; gap:1.9rem; flex-shrink:0; }
.contact-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.95rem; }
.contact-list li{ display:flex; align-items:center; gap:0.8rem; font-size:0.92rem; color:var(--on-dark); }
.contact-list svg{ width:18px; height:18px; color:var(--orange); flex-shrink:0; }
.contact-list a{ text-decoration:none; transition:color 0.2s ease; }
.contact-list a:hover{ color:var(--orange); }

/* ============ MOBILE MENU ============
   Hamburger + full-screen white overlay, built by menu.js and shown below 761px
   (the header links are hidden there). Base styles live above the responsive rules so they can override these. */
.nav-toggle{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:44px; height:44px; margin-right:-11px; padding:0; border:0; background:none; color:var(--ink); cursor:pointer;
}
.nav-toggle span{ display:block; width:22px; height:2px; border-radius:2px; background:currentColor; }
.mobile-menu{
  position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; overflow-y:auto;
  background:#fff; opacity:0; transition:opacity 0.22s ease;
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu.is-open{ opacity:1; }
.mobile-menu-top{ display:flex; align-items:center; justify-content:space-between; width:100%; padding-top:1.3rem; padding-bottom:1.3rem; }
.mobile-menu-close{
  display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-right:-11px; padding:0;
  border:0; background:none; color:var(--ink); cursor:pointer; transition:color 0.2s ease;
}
.mobile-menu-close svg{ width:26px; height:26px; }
.mobile-menu-close:hover{ color:var(--orange); }
.mobile-menu-list{ display:flex; flex-direction:column; padding:2rem var(--pad) 3rem; }
.mobile-menu-list a{
  padding:1.05rem 0; font-size:2rem; font-weight:700; line-height:1.1; letter-spacing:-0.03em;
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); transition:color 0.2s ease;
}
.mobile-menu-list a:hover, .mobile-menu-list a[aria-current="page"]{ color:var(--orange); }
html.menu-open{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){ .mobile-menu{ transition:none; } }

/* ============ RESPONSIVE ============ */
/* the two-column About copy runs into the portrait on tablets and small laptops, so it stacks into a narrow left column that stays clear of the face */
@media (max-width:1400px){
  .about-grid{ grid-template-columns:1fr; gap:1.8rem; max-width:calc(42vw - 2.5rem); }
}
/* below this there is no room for copy and portrait side by side (a taller band only enlarges the face), so the copy gets the width instead */
@media (max-width:1160px){
  .about-bg{ display:none; }
  .about-grid{ max-width:48rem; }
}
@media (max-width:1000px){
  .hero-art{ width:72%; opacity:0.9; }
}
@media (max-width:760px){
  :root{ --pad:22px; }
  .header-inner{ padding-top:1.3rem; padding-bottom:1.3rem; }
  .main-nav{ display:none; } /* replaced by the hamburger menu (menu.js) */
  .nav-toggle{ display:inline-flex; }
  .hero-art{ position:relative; top:0; right:0; width:100%; height:480px; margin:0; max-width:none; mask-image:none; -webkit-mask-image:none; }
  .hero-inner{ padding-top:1rem; padding-bottom:4rem; }
  .hero-actions{ flex-wrap:wrap; gap:1.2rem; }
  .about-inner{ padding-top:3.5rem; padding-bottom:4rem; }
  .work-grid{ grid-template-columns:1fr; }
  .card-lg{ min-height:340px; }
  .cta-inner{ flex-direction:column; align-items:flex-start; gap:2.5rem; }

  /* thumb-sized tap targets: the small text links keep their look, but get an invisible hit area of about 44px around them */
  .brand, .btn-text, .link-arrow, .back-link, .contact-methods a, .cm-copy{ position:relative; }
  .brand::before, .btn-text::before, .link-arrow::before, .back-link::before,
  .contact-methods a::before, .cm-copy::before{
    content:""; position:absolute; inset:-12px -4px;
  }
  .cm-copy::before{ inset:-10px -6px; }
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.main-nav a.active{ position:relative; color:var(--ink); }
.main-nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:2px; border-radius:2px; background:var(--orange);
}

/* shared section heading (two-tone) */
.sec-title{
  margin:1.6rem 0 1.4rem;
  font-size:clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight:700; line-height:1.08; letter-spacing:-0.025em;
}
.sec-title .t-dark{ color:var(--ink); }
.sec-title .t-grey{ color:var(--grey); }

/* ---------- MY STORY (about hero) ---------- */
.story{ position:relative; overflow:hidden; }
.story-inner{ position:relative; z-index:1; padding-top:8.5rem; padding-bottom:3rem; }
.story-copy{ max-width:560px; }
.story-title{
  margin:1.6rem 0 0; font-size:clamp(2.4rem, 4.4vw, 3.7rem);
  font-weight:700; line-height:1.05; letter-spacing:-0.03em;
}
.story-title span{ display:block; }
.story-title .t-dark{ color:var(--ink); }
.story-title .t-grey{ color:var(--grey); }
.story-copy p{ margin:1.5rem 0 0; font-size:1rem; line-height:1.7; color:var(--muted); }
.story-copy .btn-primary{ margin-top:2.2rem; }

/* composed portrait-over-orb, bled to the right edge like a background and
   faded into the white page on its left — not a bounded rectangle */
.story-hero{
  position:absolute; top:0; right:0; bottom:0;
  width:50%; height:100%;
  object-fit:cover; object-position:60% center; z-index:0; pointer-events:none;
  mask-image:linear-gradient(90deg, transparent 3%, #000 42%);
}
/* in this range the copy reaches into the portrait: slide the photo so the face clears the text (above it the quote needs the face further left; at 1000px and below the hero stacks) */
@media (min-width:1001px) and (max-width:1160px){
  .story-hero{ object-position:36% center; }
}
/* quote sits as plain text on the dark part of the orb (no card), per the design */
.quote-card{
  position:absolute; right:4.5rem; bottom:5.5rem; z-index:2; margin:0; padding:0;
  width:200px; color:#fff; text-shadow:0 1px 16px rgba(8,12,20,0.5);
}
.quote-card .q-mark{
  display:block; font-family:Georgia,"Times New Roman",serif; font-weight:700;
  font-size:3.6rem; line-height:0.55; color:#4F8BF5; margin-bottom:0.9rem;
}
.quote-card p{ margin:0 0 1.3rem; font-size:1.55rem; font-weight:500; line-height:1.18; letter-spacing:-0.01em; }
.quote-card .q-rule{ display:block; width:48px; height:2px; background:rgba(255,255,255,0.7); }

/* ---------- CAREER JOURNEY (timeline) ---------- */
.journey{ padding:5.5rem 0; border-top:1px solid var(--line); }
.journey-inner{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:4rem; align-items:start; }
.journey-copy{ max-width:420px; position:sticky; top:3rem; } /* stays put while the timeline scrolls */
.journey-copy p{ margin:0 0 1.3rem; font-size:0.98rem; line-height:1.7; color:var(--muted); }
.timeline{ padding-top:0.4rem; }
.tl-item{ display:grid; grid-template-columns:92px 26px 1fr; column-gap:1.3rem; padding-bottom:2.4rem; }
.tl-item:last-child{ padding-bottom:0; }
.tl-date{ text-align:right; font-size:0.78rem; font-weight:500; color:var(--muted); padding-top:0.15rem; }
.tl-marker{ position:relative; }
/* the line is grey with an orange fill down to --fill (set from scroll in motion.js); dots go orange once reached */
.tl-marker::before{ content:""; position:absolute; left:50%; top:0.5rem; bottom:-2.4rem; width:2px; background:linear-gradient(to bottom, var(--orange) var(--fill,0%), var(--line) var(--fill,0%)); transform:translateX(-50%); }
.tl-item:last-child .tl-marker::before{ display:none; }
.tl-marker::after{ content:""; position:absolute; left:50%; top:0.42rem; width:9px; height:9px; border-radius:50%; background:var(--grey); transform:translateX(-50%); box-shadow:0 0 0 4px var(--bg); transition:background-color 0.35s ease; }
.tl-item.is-lit .tl-marker::after{ background:var(--orange); }
.tl-content h3{ margin:0 0 0.45rem; font-size:1.02rem; font-weight:700; letter-spacing:-0.01em; }
.tl-content p{ margin:0; font-size:0.88rem; line-height:1.6; color:var(--muted); }

/* ---------- MY PROCESS & CRAFT ---------- */
.process-sec{ padding:5.5rem 0; border-top:1px solid var(--line); }
/* dark band, same ground as the FlickNight case-study dark sections */
.process-sec--dark{ background:var(--dark); color:var(--on-dark); border-top:0; }
.process-sec--dark .sec-title .t-dark{ color:#fff; }
.process-sec--dark .process-copy p,
.process-sec--dark .process-right > p{ color:var(--on-dark-mut); } /* direct child only: the quote card's own text stays dark */
.process-sec--dark + .tools-sec{ border-top:0; }
.process-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:2.4rem; align-items:start; margin-top:2.6rem; }
.process-copy .sec-title{ margin-top:0; }
.process-copy p{ margin:0; font-size:0.95rem; line-height:1.7; color:var(--muted); }
.process-img{ position:relative; margin:0; border-radius:16px; overflow:hidden; }
.process-img img{ display:block; width:100%; height:auto; }
.process-right{ display:flex; flex-direction:column; gap:1.6rem; }
.process-right p{ margin:0; font-size:0.95rem; line-height:1.7; color:var(--muted); }
/* plain quote on the dark band: no card, no background image */
.quote-card-lg{
  position:relative; inset:auto; width:auto; border-radius:0;
  background:none; border:none; color:#fff;
  padding:0.4rem 0 0; backdrop-filter:none; text-shadow:none;
}
.quote-card-lg .q-mark{ font-size:2.6rem; line-height:0.6; margin-bottom:0.9rem; }
.quote-card-lg .q-mark-orange{ color:var(--orange); }
.quote-card-lg p{ color:#fff; font-size:1.12rem; font-weight:500; line-height:1.45; letter-spacing:-0.01em; margin:0 0 1.2rem; }
.quote-card-lg .q-rule{ width:72px; height:3px; background:#5A606C; }

/* ---------- OUTSIDE OF WORK (gallery) ---------- */
.gallery-sec{ padding:5.5rem 0 6rem; background:var(--tint); }
.gallery-inner{ display:grid; grid-template-columns:0.85fr 2fr; gap:3.5rem; align-items:center; }
.gallery-copy{ max-width:380px; }
.gallery-copy p{ margin:0; font-size:0.96rem; line-height:1.7; color:var(--muted); }
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.gal-img{ border-radius:14px; min-height:270px; background-size:cover; background-position:center; }
.ph-g1{ background-image:url("images/outside-1.webp"); }
.ph-g2{ background-image:url("images/outside-2.webp"); }
.ph-g3{ background-image:url("images/outside-3.webp"); }
.ph-notebook{ background:linear-gradient(150deg, #263248 0%, #35508A 55%, #22304D 100%); }

/* ---------- about responsive ---------- */
@media (max-width:1000px){
  .story-hero{ position:relative; width:100%; height:auto; min-height:430px; -webkit-mask-image:none; mask-image:none; }
  .story-inner{ padding-top:2.5rem; padding-bottom:1rem; }
  .story .quote-card{ display:none; }
  .journey-inner{ grid-template-columns:1fr; gap:2rem; }
  .journey-copy{ position:static; }
  .process-grid{ grid-template-columns:1fr; gap:2rem; }
  .process-img{ min-height:300px; }
  .quote-card-lg{ max-width:560px; }
  .gallery-inner{ grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:640px){
  .tl-item{ grid-template-columns:66px 20px 1fr; column-gap:0.85rem; }
  .tl-date{ font-size:0.72rem; }
  .gallery-grid{ grid-template-columns:1fr; }
  .gal-img{ min-height:220px; }
}

/* =========================================================
   WORK PAGE
   ========================================================= */
.work-hero{ position:relative; overflow:hidden; }
.work-hero-orb{
  position:absolute; top:0; right:0; width:70%; max-width:none;
  z-index:0; pointer-events:none;
}
.work-hero-inner{ position:relative; z-index:1; padding-top:10rem; padding-bottom:13rem; }
.work-hero-title{
  margin:1.6rem 0 0; font-size:clamp(2.8rem, 5.2vw, 4.2rem);
  font-weight:700; line-height:1.04; letter-spacing:-0.03em;
}
.work-hero-title span{ display:block; }
.work-hero-title .t-dark{ color:var(--ink); }
.work-hero-title .t-grey{ color:var(--grey); }
.work-lead{ margin:1.8rem 0 0; max-width:34rem; font-size:1.05rem; line-height:1.6; color:var(--muted); }
/* 13rem of space under the intro is generous on desktop but a lot of dead space on a phone */
@media (max-width:760px){ .work-hero-inner{ padding-bottom:3rem; } }

.projects{ padding-top:5rem; padding-bottom:5rem; }
/* full-bleed pale blue band behind a row (same tint as the FlickNight insight section) */
.project-band{ background:var(--tint); }
.project{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.project-copy{ grid-column:1; grid-row:1; max-width:460px; }
.project-img{
  grid-column:2; grid-row:1; margin:0; border-radius:16px; overflow:hidden;
  box-shadow:0 34px 60px -34px rgba(16,20,30,0.35);
}
.project-img img{ display:block; width:100%; height:auto; }
/* alternating row — image on the left */
.project--reverse .project-copy{ grid-column:2; justify-self:end; }
.project--reverse .project-img{ grid-column:1; }

.p-cat{ display:flex; align-items:center; gap:0.85rem; font-size:0.72rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.p-cat .p-num{ color:var(--orange); letter-spacing:0.02em; }
.p-cat .p-rule{ width:28px; height:1px; background:var(--line); }
.project-title{ margin:1.1rem 0 0; font-size:clamp(1.9rem, 3.2vw, 2.5rem); font-weight:700; line-height:1.1; letter-spacing:-0.025em; color:var(--ink); }
.project-body{ margin:1.2rem 0 0; font-size:1rem; line-height:1.65; color:var(--muted); }
.project-copy .link-arrow{ display:inline-flex; margin-top:1.7rem; }
.case-copy .link-arrow{ margin-top:1.7rem; }

@media (max-width:860px){
  .project{ grid-template-columns:1fr; gap:1.8rem; }
  .project-copy, .project--reverse .project-copy{ grid-column:1; grid-row:2; justify-self:start; max-width:none; }
  .project-img, .project--reverse .project-img{ grid-column:1; grid-row:1; }
  .projects{ padding-top:3.5rem; padding-bottom:3.5rem; }
}

/* =========================================================
   PROJECT DETAIL / CASE STUDY (shared template)
   ========================================================= */
/* subtle placeholder rectangle — stands in for real imagery while building */
.ph{ display:block; width:100%; border-radius:16px; background:#EDF1F7; }

.detail-hero-c{ position:relative; z-index:1; padding-top:6.5rem; padding-bottom:6.5rem; }
.back-link{ display:inline-flex; align-items:center; gap:0.5rem; font-size:0.85rem; font-weight:500; color:var(--muted); text-decoration:none; transition:color 0.2s ease; }
.back-link svg{ width:17px; height:17px; }
.back-link:hover{ color:var(--orange); }

/* centered hero */
.detail-hero{ position:relative; overflow:hidden; }
/* orb bleeds from the top-right, up behind the nav, faded into the white on its
   left (same image + treatment as the home hero) so the centered copy stays clean */
.detail-hero-orb{
  position:absolute; top:0; right:0; width:64%; max-width:none;
  z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 42%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 42%);
}
.detail-hero-inner{ max-width:760px; margin:0 auto; padding:1.8rem 0 3rem; text-align:center; }
.eyebrow-center{ justify-content:center; }
.detail-title{ margin:1.3rem 0 0; font-size:clamp(2.4rem, 4.6vw, 3.6rem); font-weight:700; line-height:1.05; letter-spacing:-0.03em; }
.detail-title span{ display:block; }
.detail-title .t-dark{ color:var(--ink); }
.detail-title .t-grey{ color:var(--grey); }
.detail-lead{ margin:1.5rem auto 0; max-width:52ch; font-size:1.05rem; line-height:1.6; color:var(--muted); }

/* poster image */
.detail-hero-img{ margin:0; border-radius:16px; overflow:hidden; box-shadow:0 44px 80px -44px rgba(16,20,30,0.4); }
.detail-hero-img .ph{ border-radius:0; }
.detail-hero-img img{ display:block; width:100%; height:auto; }

/* meta row */
.detail-meta{ display:flex; justify-content:center; gap:4.5rem; padding:2.6rem 0 1rem; flex-wrap:wrap; }
.meta-item .meta-label{ display:block; font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:0.45rem; }
.meta-item .meta-val{ font-size:0.95rem; font-weight:600; color:var(--ink); }

/* numbered narrative sections */
.case-section{ padding:5.5rem 0; }
.case-section--tint{ background:var(--tint); }
/* dark act — sets the marketing-site sections apart from the light app sections */
.case-section--dark{ background:#0B0F17; color:var(--on-dark); }
.case-section--dark .case-kicker{ color:var(--on-dark-mut); }
.case-section--dark .case-title{ color:#fff; }
.case-section--dark .case-body{ color:var(--on-dark-mut); }
.case-section--dark .c-rule{ background:var(--dark-line); }
.case-section--dark .ph{ background:#161C28; }
.case-row{ display:grid; grid-template-columns:.85fr 1.15fr; gap:3.5rem; align-items:center; }
/* reversed rows put the media in column 1, so flip the weighting to keep the image the bigger side */
.case-row--reverse{ grid-template-columns:1.15fr .85fr; }
/* tall media beside short copy: pin the copy to the top and let it follow the scroll */
.case-row--sticky{ align-items:start; }
.case-row--sticky .case-copy{ position:sticky; top:3rem; }
.case-copy{ grid-column:1; grid-row:1; max-width:460px; }
.case-media{ grid-column:2; grid-row:1; margin:0; }
.case-media .ph{ box-shadow:0 30px 56px -34px rgba(16,20,30,0.3); }
.case-media img{ display:block; width:100%; height:auto; border-radius:16px; box-shadow:0 30px 56px -34px rgba(16,20,30,0.4); }
/* cut-out-on-white illustrations: no card frame, so they blend into the section */
.case-media img.case-img--plain{ border-radius:0; box-shadow:none; }
/* framed UI screenshots: keep the standard rounded corners, drop the drop shadow */
.case-media img.case-img--flat{ box-shadow:none; }
/* on a tinted section the white render background multiplies away into the tint */
.case-section--tint .case-media img.case-img--plain{ mix-blend-mode:multiply; }
.case-row--reverse .case-copy{ grid-column:2; justify-self:end; }
.case-row--reverse .case-media{ grid-column:1; }


/* 04 — inline mood line-up: plain image, not a lightbox link */
.moods-strip{ margin:3rem 0 0; text-align:center; }
.moods-strip img{ display:block; width:100%; height:auto; }
.moods-strip figcaption{ max-width:34rem; margin:4rem auto 2.8rem; font-size:1.05rem; line-height:1.55; color:var(--muted); }
.moods-strip figcaption strong{ color:var(--ink); font-weight:700; font-size:1.35rem; }
.case-eyebrow{ display:flex; align-items:center; gap:0.85rem; margin-bottom:1rem; }
.case-eyebrow--center{ justify-content:center; }
.case-eyebrow .c-num{ font-size:0.9rem; font-weight:700; color:var(--orange); letter-spacing:0.02em; }
.case-eyebrow .c-rule{ width:40px; height:1px; background:var(--line); }
.case-kicker{ margin:0 0 0.7rem; font-size:0.85rem; font-weight:500; color:var(--muted); }
.case-title{ margin:0; font-size:clamp(1.9rem, 3.4vw, 2.5rem); font-weight:700; line-height:1.12; letter-spacing:-0.025em; color:var(--ink); }
.case-body{ margin:1.2rem 0 0; font-size:1rem; line-height:1.65; color:var(--muted); }

/* centered result section */
.case-section--center{ text-align:center; }
.case-center-inner{ max-width:620px; margin:0 auto; }
.case-section--center .case-body{ margin-left:auto; margin-right:auto; }
.result-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.25rem; margin-top:3rem; }
.result-grid .ph{ box-shadow:0 30px 15px -20px rgba(16,20,30,0.15); }
/* add this class to any result image to make it span the full width */
.result-grid .ph--wide{ grid-column:1 / -1; }
/* odd count of tiles: same 4-up columns, but a short last row centres under the full one */
.result-grid--centered{ display:flex; flex-wrap:wrap; justify-content:center; }
.result-grid--centered > .ph{ width:calc((100% - 3 * 1.25rem) / 4); }
/* clickable result images */
.result-link img{ display:block; width:100%; height:auto; border-radius:16px; }
.result-link{ cursor:pointer; transition:transform 0.25s ease, box-shadow 0.25s ease; }
.result-link:hover{ transform:perspective(900px) translateY(-4px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); box-shadow:0 44px 72px -34px rgba(16,20,30,0.42); }

/* lightbox overlay (built by lightbox.js) */
body.lb-open{ overflow:hidden; }
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:5vmin;
  background:rgba(8,11,18,0.9); backdrop-filter:blur(4px);
  animation:lb-fade 0.2s ease;
}
.lightbox[hidden]{ display:none; }
.lightbox{ cursor:zoom-out; }          /* a click anywhere off the image closes it */
.lightbox img{ cursor:default; }
@keyframes lb-fade{ from{ opacity:0; } }
.lightbox-content{ max-width:1100px; width:100%; display:flex; justify-content:center; }
.lightbox-content img{ display:block; max-width:100%; max-height:86vh; width:auto; height:auto; border-radius:12px; box-shadow:0 40px 90px -30px rgba(0,0,0,0.6); }
.lightbox-ph{ width:min(1000px, 86vw); height:min(600px, 78vh); border-radius:12px; }
.lightbox-close{
  position:absolute; top:3.5vmin; right:3.5vmin; width:46px; height:46px; border-radius:999px;
  border:none; background:rgba(255,255,255,0.14); color:#fff; font-size:1.6rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s ease;
}
.lightbox-close:hover{ background:rgba(255,255,255,0.28); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:999px;
  border:none; background:rgba(255,255,255,0.14); color:#fff; font-size:1.6rem; line-height:1; padding:0 0 3px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s ease;
}
.lightbox-nav:hover{ background:rgba(255,255,255,0.28); }
.lightbox-prev{ left:3.5vmin; }
.lightbox-next{ right:3.5vmin; }

/* next-project CTA (dark, mountains) */
.next-project{
  position:relative; overflow:hidden;
  background:#0A0E16 url("images/footer-mountains.webp") center/cover no-repeat;
  color:var(--on-dark);
}
.next-project::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg, rgba(8,11,18,0.92) 0%, rgba(8,11,18,0.62) 55%, rgba(8,11,18,0.3) 100%);
}
.next-project-inner{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between;
  gap:2.5rem; padding-top:4.5rem; padding-bottom:4.5rem; flex-wrap:wrap;
}
.next-title{ margin:1.1rem 0 0; max-width:22ch; font-size:clamp(1.6rem, 3vw, 2.2rem); font-weight:700; line-height:1.15; letter-spacing:-0.02em; }

@media (max-width:860px){
  .case-row{ grid-template-columns:1fr; gap:1.8rem; }
  .case-copy, .case-row--reverse .case-copy{ grid-column:1; grid-row:2; justify-self:start; max-width:none; }
  .case-media, .case-row--reverse .case-media{ grid-column:1; grid-row:1; }
  .case-row--sticky .case-copy{ position:static; }
  .result-grid{ grid-template-columns:1fr 1fr; }
  .result-grid--centered > .ph{ width:calc((100% - 1.25rem) / 2); }
  .detail-meta{ gap:2rem; }
  .next-project-inner{ flex-direction:column; align-items:flex-start; gap:1.8rem; }
}

/* =========================================================
   FOOTER BAR (copyright) — slim dark base beneath the page
   ========================================================= */
.page-footer{
  background:#090D14; color:var(--on-dark-mut);
  border-top:1px solid rgba(255,255,255,0.08);
}
.footer-bar{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-top:1.7rem; padding-bottom:1.7rem;
}
.copyright{ margin:0; font-size:0.85rem; color:var(--on-dark-mut); letter-spacing:0.01em; }
.copyright span{ color:var(--on-dark); font-weight:500; }
.page-footer .footer-nav{ display:flex; gap:1.7rem; }
.page-footer .footer-nav a{
  font-size:0.82rem; letter-spacing:0.02em; color:var(--on-dark-mut);
  text-decoration:none; transition:color 0.2s ease;
}
.page-footer .footer-nav a:hover{ color:var(--orange); }
/* the hamburger replaces the site nav on small screens, so the footer keeps just the copyright */
@media (max-width:760px){ .page-footer .footer-nav{ display:none; } }
@media (max-width:640px){
  .footer-bar{ flex-direction:column; align-items:flex-start; gap:0.9rem; }
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-page{ position:relative; overflow:hidden; min-height:100vh; display:flex; align-items:center; }
.contact-bg{
  position:absolute; top:0; right:0; bottom:0; width:90%; height:100%;
  object-fit:cover; object-position:center; z-index:0; pointer-events:none;
  mask-image:linear-gradient(90deg, transparent 3%, #000 42%);
}
.contact-inner{ position:relative; z-index:1; width:100%; padding-top:7rem; padding-bottom:3rem; }
.contact-copy{ max-width:600px; }
.contact-title{
  margin:1.6rem 0 0; font-size:clamp(2.6rem, 5vw, 4rem);
  font-weight:700; line-height:1.04; letter-spacing:-0.03em;
}
.contact-title span{ display:block; }
.contact-title .t-dark{ color:var(--ink); }
.contact-title .t-grey{ color:var(--grey); }
.contact-lead{ margin:2rem 0 0; max-width:33rem; font-size:1.05rem; line-height:1.6; color:var(--muted); }

.contact-methods{ list-style:none; margin:2.8rem 0 0; padding:0; display:flex; flex-direction:column; gap:1.5rem; }
.contact-methods li{ display:flex; align-items:center; gap:1.1rem; }
.cm-icon{
  flex-shrink:0; width:46px; height:46px; border-radius:999px;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink);
}
.cm-icon svg{ width:19px; height:19px; }
.cm-label{ display:block; font-size:0.95rem; font-weight:700; color:var(--ink); margin-bottom:0.1rem; }
.contact-methods a, .cm-val{ font-size:0.95rem; color:var(--muted); text-decoration:none; }
.contact-methods a{
  padding-bottom:2px; transition:color 0.2s ease, background-size 0.35s ease;
  background:linear-gradient(var(--orange), var(--orange)) 0 100% / 0 1.5px no-repeat;
}
.contact-methods a:hover{ color:var(--orange); background-size:100% 1.5px; }
.cm-icon{ transition:transform 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.contact-methods li:has(a):hover .cm-icon{ transform:translateX(3px); border-color:var(--orange); color:var(--orange); }

/* email row: link + small copy button */
.cm-row{ display:flex; align-items:center; flex-wrap:wrap; gap:0.7rem; }
.cm-copy{
  font:inherit; font-size:0.74rem; font-weight:600; letter-spacing:0.02em; line-height:1;
  padding:0.32rem 0.7rem; border-radius:999px; border:1px solid var(--line); background:transparent;
  color:var(--muted); cursor:pointer; transition:color 0.2s ease, border-color 0.2s ease;
}
.cm-copy:hover{ color:var(--orange); border-color:var(--orange); }
.cm-copy.is-copied{ color:var(--orange); border-color:var(--orange); }

/* narrow screens: the photo stays a background, pinned to the top-right and dissolving away from that corner in every direction, with the copy over its pale left side */
@media (max-width:1000px){
  .contact-page{ min-height:auto; }
  .contact-bg{ width:100%; height:clamp(320px, 62vw, 560px); top:0; bottom:auto; mask-image:radial-gradient(ellipse 100% 100% at 100% 0, #000 30%, transparent 100%); }
  .contact-inner{ padding-top:8.5rem; padding-bottom:4rem; }
}
/* the contact page is short: make the page at least one screen tall and let the content area take the spare height, so the footer rests on the bottom of the screen instead of floating part-way up (this page only) */
.page-contact{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
.page-contact .contact-page{ flex:1 0 auto; }
/* portrait tablets wide enough for the side-by-side layout are tall: start the copy at the top, spaced from the header like the other pages, instead of floating mid-page */
@media (orientation:portrait) and (min-width:1001px){
  .contact-page{ align-items:flex-start; }
  .contact-inner{ padding-top:8.5rem; }
}

/* ---- motion (driven by motion.js; every rule is gated on .js-motion, which <head> only sets when reduced-motion is off) ---- */
.js-motion .reveal{ opacity:0; transform:translateY(32px); transition:opacity 1.1s ease, transform 1.3s cubic-bezier(0.2,0.7,0.2,1); }
.js-motion .reveal.is-in{ opacity:1; transform:none; }
/* fade only, for images using mix-blend-mode (see motion.js) */
.js-motion .reveal--fade{ transform:none; }

.js-motion .case-eyebrow .c-rule{ transform:scaleX(0); transform-origin:left center; transition:transform 1.4s cubic-bezier(0.2,0.7,0.2,1) 0.3s; }
.js-motion .case-eyebrow .c-rule.is-drawn{ transform:none; }

.js-motion .case-media img.case-img--plain, .js-motion .case-media img.case-img--flat, .js-motion .moods-strip img{ will-change:transform; }

@keyframes rise{ from{ opacity:0; transform:translateY(16px); } }
.js-motion .detail-hero .eyebrow,
.js-motion .detail-title .t-dark,
.js-motion .detail-title .t-grey,
.js-motion .detail-lead{ animation:rise 1.2s cubic-bezier(0.2,0.7,0.2,1) both; }
.js-motion .detail-title .t-grey{ animation-delay:0.25s; }
.js-motion .detail-lead{ animation-delay:0.5s; }

.read-progress{
  position:fixed; top:0; left:0; right:0; height:2px; background:var(--orange);
  transform:scaleX(0); transform-origin:left center; z-index:150; pointer-events:none;
}

/* ---- motion: home page (same gating as above) ---- */
.js-motion .hero .eyebrow,
.js-motion .hero-title .t-dark,
.js-motion .hero-title .t-grey,
.js-motion .hero-sub,
.js-motion .hero-actions{ animation:rise 1.2s cubic-bezier(0.2,0.7,0.2,1) both; }
.js-motion .hero-title .t-dark{ animation-delay:0.2s; }
.js-motion .hero-title .t-grey{ animation-delay:0.4s; }
.js-motion .hero-sub{ animation-delay:0.65s; }
.js-motion .hero-actions{ animation-delay:0.85s; }

/* orb: slow float via the individual `translate` property, so JS can use `transform` for pointer/scroll */
@keyframes orb-float{ from{ translate:0 7px; } to{ translate:0 -7px; } }
.js-motion .hero-art{ animation:orb-float 18s ease-in-out infinite alternate; will-change:transform; }
.js-motion .about-bg{ transform-origin:right center; will-change:transform; }

.js-motion .eyebrow .eb-line{ transform:scaleX(0); transform-origin:left center; transition:transform 1.4s cubic-bezier(0.2,0.7,0.2,1) 0.3s; }
.js-motion .eyebrow .eb-line.is-drawn{ transform:none; }

.js-motion .about-title .count{ display:inline-block; min-width:2ch; text-align:right; font-variant-numeric:tabular-nums; }

/* work cards: arrow nudges, and a soft light follows the pointer */
.card-arrow svg{ transition:transform 0.25s ease; }
.card:hover .card-arrow svg{ transform:translateX(3px); }
.card-blue, .card-orange{ --glow:rgba(242,96,12,0.13); }
.card-dark{ --glow:rgba(255,255,255,0.14); }
.js-motion .card::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity 0.4s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), var(--glow), transparent 62%);
}
.js-motion .card:hover::after{ opacity:1; }
.js-motion .card > *{ position:relative; z-index:1; }

/* ---- motion: contact page (same gating as above) ---- */
.js-motion .contact-copy .eyebrow,
.js-motion .contact-title .t-dark,
.js-motion .contact-title .t-grey,
.js-motion .contact-lead,
.js-motion .contact-methods li{ animation:rise 1.2s cubic-bezier(0.2,0.7,0.2,1) both; }
.js-motion .contact-title .t-dark{ animation-delay:0.2s; }
.js-motion .contact-title .t-grey{ animation-delay:0.4s; }
.js-motion .contact-lead{ animation-delay:0.65s; }
.js-motion .contact-methods li:nth-child(1){ animation-delay:0.85s; }
.js-motion .contact-methods li:nth-child(2){ animation-delay:1s; }
.js-motion .contact-methods li:nth-child(3){ animation-delay:1.15s; }
.js-motion .contact-bg{ animation:orb-float 24s ease-in-out infinite alternate; will-change:transform; }

/* ---- motion: about page (same gating as above) ---- */
@keyframes draw-x{ from{ transform:scaleX(0); } }
.js-motion .story-copy .eyebrow,
.js-motion .story-title .t-dark,
.js-motion .story-title .t-grey,
.js-motion .story-copy p,
.js-motion .story-copy .btn-primary,
.js-motion .story > .quote-card{ animation:rise 1.2s cubic-bezier(0.2,0.7,0.2,1) both; }
.js-motion .story-title .t-dark{ animation-delay:0.2s; }
.js-motion .story-title .t-grey{ animation-delay:0.4s; }
.js-motion .story-copy p:nth-of-type(1){ animation-delay:0.6s; }
.js-motion .story-copy p:nth-of-type(2){ animation-delay:0.75s; }
.js-motion .story-copy .btn-primary{ animation-delay:0.95s; }
.js-motion .story > .quote-card{ animation-delay:1.3s; }
.js-motion .story > .quote-card .q-rule{ transform-origin:left center; animation:draw-x 1.1s cubic-bezier(0.2,0.7,0.2,1) 1.8s both; }
.js-motion .story-hero{ animation:orb-float 24s ease-in-out infinite alternate; will-change:transform; }

/* timeline: each entry fades up, its dot pops, and the line to the next dot draws down (--d staggers a batch) */
.js-motion .tl-date, .js-motion .tl-content{
  opacity:0; transform:translateY(18px);
  transition:opacity 1s ease calc(var(--d,0s) + 0.1s), transform 1.2s cubic-bezier(0.2,0.7,0.2,1) calc(var(--d,0s) + 0.1s);
}
.js-motion .tl-content{ transition-delay:calc(var(--d,0s) + 0.25s); }
.js-motion .tl-marker::after{ transform:translateX(-50%) scale(0); transition:transform 0.6s cubic-bezier(0.3,1.4,0.5,1) calc(var(--d,0s) + 0.15s), background-color 0.35s ease; }
.js-motion .tl-marker::before{ transform:translateX(-50%) scaleY(0); transform-origin:top; transition:transform 1.1s cubic-bezier(0.2,0.7,0.2,1) calc(var(--d,0s) + 0.4s); }
.js-motion .tl-item.is-seen .tl-date,
.js-motion .tl-item.is-seen .tl-content{ opacity:1; transform:none; }
.js-motion .tl-item.is-seen .tl-marker::after{ transform:translateX(-50%) scale(1); }
.js-motion .tl-item.is-seen .tl-marker::before{ transform:translateX(-50%) scaleY(1); }

/* large quote card: the orange mark settles in, then the rule draws */
.js-motion .quote-card-lg .q-mark{ opacity:0; transform:scale(0.6); transform-origin:left bottom; transition:opacity 0.6s ease 0.3s, transform 0.8s cubic-bezier(0.3,1.4,0.5,1) 0.3s; }
.js-motion .quote-card-lg .q-rule{ transform:scaleX(0); transform-origin:left center; transition:transform 1s cubic-bezier(0.2,0.7,0.2,1) 0.8s; }
.js-motion .quote-card-lg.is-seen .q-mark{ opacity:1; transform:none; }
.js-motion .quote-card-lg.is-seen .q-rule{ transform:none; }

/* gallery: photos zoom very slightly inside their frame on hover (pseudo-element copies the tile's own background) */
.gal-img{ position:relative; overflow:hidden; }
.gal-img::before{ content:""; position:absolute; inset:0; background:inherit; transition:transform 0.9s cubic-bezier(0.2,0.7,0.2,1); }
@media (hover:hover){ .gal-img:hover::before{ transform:scale(1.05); } }

/* ---------- TOOLS & CRAFT (about) ---------- */
.tools-sec{ padding:5.5rem 0; border-top:1px solid var(--line); }
.tools-inner{ display:grid; grid-template-columns:0.9fr 2fr; gap:3.5rem; align-items:start; }
.tools-copy{ max-width:380px; }
.tools-copy p{ margin:0; font-size:0.98rem; line-height:1.7; color:var(--muted); }
.tools-group{ padding:1.9rem 0; border-top:1px solid var(--line); }
.tools-group:first-child{ padding-top:0; border-top:0; }
.tools-group:last-child{ padding-bottom:0; }
.tools-group-head h3{ margin:0; font-size:1.02rem; font-weight:700; letter-spacing:-0.01em; }
.tools-group-head p{ margin:0.25rem 0 0; font-size:0.9rem; color:var(--muted); }
.tool-list{ list-style:none; margin:1.1rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:0.65rem; }
.tool-chip{
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.5rem 1rem 0.5rem 0.5rem; border:1px solid var(--line); border-radius:999px;
  font-size:0.9rem; font-weight:600; color:var(--ink);
  transition:transform 0.25s ease, border-color 0.25s ease;
}
.tool-chip:hover{ transform:translateY(-2px); border-color:var(--accent); }
.tool-mark{
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; background:var(--accent); color:#fff;
  font-size:0.7rem; font-weight:700; letter-spacing:-0.02em;
}
/* each group carries one accent (mark colour + hover outline) */
.tools-group{ --accent:var(--ink); }
.tools-group--design{ --accent:#2A3A66; } /* navy, as in the quote card */
.tools-group--build{ --accent:#3A74E0; }  /* the hero quote-mark blue, deepened so white initials stay legible */
.tools-group--ai{ --accent:var(--orange); }
.tool-level{ padding-left:0.6rem; border-left:1px solid var(--line); font-size:0.76rem; font-weight:500; color:var(--muted); }
@media (max-width:1000px){
  .tools-inner{ grid-template-columns:1fr; gap:2rem; }
}

/* ---- motion: work page (same gating as above) ---- */
.project-img a{ display:block; }
.project-img img{ transition:scale 0.9s cubic-bezier(0.2,0.7,0.2,1); }
@media (hover:hover){ .project-img:hover img{ scale:1.04; } }
/* as-is variant: full image shown, no shadow, no hover zoom (the zoom would crop it) */
.project-img--asis{ box-shadow:none; overflow:visible; }
.project-img--asis img{ border-radius:16px; }
@media (hover:hover){ .project-img--asis:hover img{ scale:1; } }

.js-motion .work-hero .eyebrow,
.js-motion .work-hero-title .t-dark,
.js-motion .work-hero-title .t-grey,
.js-motion .work-lead{ animation:rise 1.2s cubic-bezier(0.2,0.7,0.2,1) both; }
.js-motion .work-hero-title .t-dark{ animation-delay:0.2s; }
.js-motion .work-hero-title .t-grey{ animation-delay:0.4s; }
.js-motion .work-lead{ animation-delay:0.65s; }
.js-motion .work-hero-orb{ animation:orb-float 24s ease-in-out infinite alternate; will-change:transform; }

.js-motion .p-cat .p-rule{ transform:scaleX(0); transform-origin:left center; transition:transform 1.2s cubic-bezier(0.2,0.7,0.2,1) 0.3s; }
.js-motion .p-cat .p-rule.is-drawn{ transform:none; }