/* ==========================================================================
   PF Studio - shared stylesheet.
   Extracted from index.html when the site went multi-page: every page links
   this one file, so a change lands everywhere instead of being repeated per
   page. No build step - plain CSS served as-is.
   ========================================================================== */
/* ============ DESIGN TOKENS — PF Studio Design System ============ */
:root{
  /* Brand — the two exact colors */
  --navy:      #00006D;
  --teal:      #40E0D0;
  --teal-700:  #12897E;  /* accessible teal for text/links on white */
  --teal-300:  #9DEEE4;  /* light teal for eyebrows on dark */

  /* Neutrals — cool navy-tinted ink */
  --ink:       #0B0B1F;  /* body text on light */
  --ink-2:     #2E2E45;  /* secondary text on light */
  --ink-mute:  #6C6C82;  /* helper / captions */
  --ink-faint: #9A9AAE;  /* placeholders */

  /* Surfaces */
  --canvas:      #ffffff;
  --canvas-soft: #F7F7FB;
  --canvas-deep: #EFEFF5;
  --hairline:        #E5E5EE;
  --hairline-strong: #D2D2DE;

  /* Dark surfaces — hero, footer, floating chrome */
  --dark-900:   #000033;
  --dark-panel: #05052E;
  --dark-hairline:  #26265E;
  --dark-text:      #ECECF6;
  --dark-text-mute: #9A9AC4;

  /* Gradients — the identity */
  --gradient-brand: linear-gradient(135deg, #00006D 0%, #40E0D0 90%);
  --gradient-mesh-vivid:
    radial-gradient(72% 140% at 0% 0%, #00006D 0%, rgba(0,0,109,0) 62%),
    radial-gradient(82% 150% at 100% 12%, #40E0D0 0%, rgba(64,224,208,0) 58%),
    #000033;

  /* Legacy aliases kept so every existing selector below still resolves */
  --bg:         var(--canvas);
  --bg-panel:   var(--canvas-soft);
  --bg-panel-2: var(--canvas-deep);
  --ink-soft:   var(--ink-2);
  --accent:     var(--teal-700);
  --accent-dim: var(--hairline-strong);
  --accent-blue:var(--navy);
  --accent-gradient: var(--gradient-brand);
  --accent-solid:     var(--navy);
  --line:       var(--hairline);
  --line-soft:  var(--hairline);

  --font-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Montserrat', system-ui, -apple-system, sans-serif;

  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-pill:9999px;
  --radius:    var(--radius-sm);
  --shadow-1:0 1px 3px rgba(0,0,60,0.08);
  --shadow-2:0 10px 30px rgba(0,0,60,0.10), 0 2px 6px rgba(0,0,60,0.05);

  --maxw:      1200px;
  --easing:    cubic-bezier(.16,.8,.24,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.eyebrow{
  font-size:11px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--teal-700); display:flex; align-items:center; gap:14px;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--hairline-strong); display:block; }
h1,h2,h3{ font-family:var(--font-serif); font-weight:300; letter-spacing:-0.01em; color:var(--ink); }
.focus-ring:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }

/* ============ NAV ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  transition:background .4s var(--easing), border-color .4s var(--easing), padding .4s var(--easing);
  border-bottom:1px solid transparent;
}
header.solid{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
  padding:16px 0;
}
header.solid .navlinks a{ color:var(--ink-2); }
header.solid .icon-btn-sm{ border-color:var(--hairline-strong); color:var(--ink-mute); }
nav.wrap{ display:flex; align-items:center; justify-content:space-between; }
.wordmark{ display:flex; align-items:center; position:relative; }
.logo-img{ height:30px; width:auto; display:block; }
@media (min-width:880px){ .logo-img{ height:42px; } }
/* The wordmark in logo.png is white, which vanishes once the header goes
   solid white on scroll. logo-dark.png is the same artwork with navy
   lettering; the two cross-fade with the header background. */
header .logo-dark{ position:absolute; top:0; left:0; opacity:0; transition:opacity .4s var(--easing); }
header .logo-light{ transition:opacity .4s var(--easing); }
header.solid .logo-light{ opacity:0; }
header.solid .logo-dark{ opacity:1; }
.navlinks{ display:flex; align-items:center; gap:40px; }
.navlinks a{
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase; font-weight:500;
  color:rgba(255,255,255,0.82); position:relative; padding:4px 0;
  transition:color .25s var(--easing);
}
header.solid .navlinks a:hover{ color:var(--navy); }
.navlinks a:hover{ color:#fff; }
.navlinks a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--teal);
  transition:width .3s var(--easing);
}
.navlinks a:hover::after{ width:100%; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-sans); font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  padding:13px 26px; border:1px solid var(--navy); color:var(--navy); border-radius:var(--radius-pill);
  transition:background .25s var(--easing), color .25s var(--easing), border-color .25s var(--easing);
  white-space:nowrap;
}
.btn:hover{ background:var(--navy); color:#fff; }
.btn.solid{ background:var(--navy); border-color:var(--navy); color:#fff; }
.btn.solid:hover{ background:#171787; border-color:#171787; }
/* on-dark context: hero, footer, floating chrome, mobile bar */
.hero .btn, .mobile-cta .btn, .wa-float-bubble .btn{ border-color:rgba(255,255,255,0.55); color:#fff; }
.hero .btn:hover, .mobile-cta .btn:hover{ background:rgba(255,255,255,0.12); color:#fff; }
/* Design system: buttons are navy-filled or outline, never teal-filled.
   On dark surfaces a navy fill would disappear into the background, so the
   filled variant inverts to white-on-navy — the same relationship as the
   light-background button, not a third colour. Teal stays reserved for
   eyebrows, tags and the circular WhatsApp tile. */
.hero .btn.solid, .mobile-cta .btn.solid{ background:#fff; border-color:#fff; color:var(--navy); }
.hero .btn.solid:hover, .mobile-cta .btn.solid:hover{ background:rgba(255,255,255,0.88); border-color:rgba(255,255,255,0.88); color:var(--navy); }
.navcta{ display:none; }
@media (min-width:880px){ .navcta{ display:inline-flex; } }
.nav-icons{ display:none; gap:8px; }
@media (min-width:880px){ .nav-icons{ display:flex; } }
.icon-btn-sm{ width:32px; height:32px; border-color:rgba(255,255,255,0.4); color:rgba(255,255,255,0.85); }
.icon-btn-sm svg{ width:14px; height:14px; }

.menu-toggle{ display:flex; flex-direction:column; gap:5px; width:26px; }
.menu-toggle span{ height:1px; width:100%; background:#fff; }
header.solid .menu-toggle span{ background:var(--ink); }
@media (min-width:880px){ .menu-toggle{ display:none; } }
@media (max-width:879px){
  .navlinks{
    position:fixed; inset:0 0 auto 0; top:0; background:var(--dark-900);
    flex-direction:column; justify-content:center; align-items:center; gap:32px;
    height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition:height .4s var(--easing), opacity .3s var(--easing);
  }
  .navlinks.open{ height:100vh; opacity:1; pointer-events:auto; }
  .navlinks a{ font-size:20px; color:#fff; }
}

/* ============ HERO ============ */
/* Hero vertical rhythm is viewport-relative so the whole block — including
   the "same day" microline and the scroll cue — still fits above the fold
   on shorter laptop screens. On tall screens the clamps land on the
   original, roomier values. */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-bottom:clamp(52px, 9vh, 96px); overflow:hidden; background:var(--gradient-mesh-vivid);
}
/* ---- Hero media ----
   .hero-media holds the background image today. To move to video later,
   drop a <video autoplay muted loop playsinline poster="assets/hero.jpg">
   into .hero-media alongside the <picture> and give it the same
   .hero-media-el class — the scrim, sizing and reduced-motion handling
   below already apply to it. Keep the image as the poster and as the
   mobile fallback; don't ship a video to phones. */
.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-media-el{
  width:100%; height:100%; object-fit:cover; object-position:center 55%;
  animation:slowzoom 24s ease-in-out infinite alternate;
}
/* Scrim. Vertical pass darkens top and bottom for the nav and the fold;
   the horizontal pass protects the left-aligned headline specifically,
   because the artwork behind it is not guaranteed to be dark. */
/* Scrim opacity is set as low as the text will tolerate, so the photograph
   carries as much of the hero as possible. Measured against a pure-white
   worst case in the image, these values give roughly 5:1 behind the
   headline, 5.4:1 behind the subhead and 4.8:1 behind the microline —
   all clear of the WCAG AA floor (4.5:1 for body text, 3:1 for the
   large headline). Lighten further and the microline fails first. */
.hero-bg{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,51,0.62) 0%, rgba(0,0,51,0.42) 42%, rgba(0,0,51,0.16) 78%, rgba(0,0,51,0.12) 100%),
    linear-gradient(180deg, rgba(0,0,51,0.40) 0%, rgba(0,0,51,0.16) 40%, rgba(0,0,51,0.74) 100%);
}
@media (max-width:640px){
  /* Narrow screens put text over the whole frame, so the scrim goes flat
     and heavier rather than directional. */
  .hero-bg{ background:linear-gradient(180deg, rgba(0,0,51,0.55) 0%, rgba(0,0,51,0.42) 45%, rgba(0,0,51,0.82) 100%); }
}
@keyframes slowzoom{ from{ transform:scale(1);} to{ transform:scale(1.06);} }
@media (prefers-reduced-motion: reduce){ .hero-media-el{ animation:none; } }
.hero-grain{
  position:absolute; inset:0; z-index:1; opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-content{ position:relative; z-index:2; }
.hero-eyebrow{ margin-bottom:clamp(16px, 3vh, 28px); color:var(--teal-300) !important; }
.hero-eyebrow::before{ background:rgba(157,238,228,0.4); }
/* The middot carried the same weight and colour as the words, so it read
   as a third piece of punctuation rather than a divider. Lightening and
   spacing it lets the two place names sit as one calm phrase. */
.hero-eyebrow .dot{ color:rgba(157,238,228,0.5); margin:0 4px; font-weight:400; }
/* The headline wraps to four lines, so its size is the single biggest
   driver of hero height. Capping against vh as well as vw keeps the whole
   block — CTAs and microline included — above the fold on short laptop
   windows. On tall screens 6.4vw still governs and nothing changes. */
.hero h1{
  font-size:clamp(38px, min(6.4vw, 9.5vh), 80px);
  font-weight:300; line-height:1.03; letter-spacing:-0.01em;
  max-width:16ch; color:#fff;
}
.hero h1 em{ font-style:normal; color:var(--teal); }
.hero-sub{
  margin-top:clamp(16px, 3vh, 28px); max-width:46ch; font-size:18px; color:rgba(255,255,255,0.82); font-weight:400; line-height:1.6;
}
.hero-actions{ display:flex; gap:16px; margin-top:clamp(24px, 5vh, 44px); flex-wrap:wrap; }
.hero-microline{ margin-top:clamp(12px, 2vh, 20px); font-size:12.5px; color:rgba(255,255,255,0.55); letter-spacing:0.02em; }
.scroll-cue{
  position:absolute; left:32px; bottom:28px; z-index:2;
  display:flex; align-items:center; gap:12px;
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.55);
}
.scroll-cue .line{ width:1px; height:34px; background:rgba(255,255,255,0.3); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--teal);
  animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }
@media (max-width:600px){ .scroll-cue{ display:none; } }

/* ============ SECTION SHELLS ============ */
section{ padding:96px 0; position:relative; scroll-margin-top:84px; }
.section-head{ display:flex; flex-direction:column; gap:18px; margin-bottom:56px; max-width:60ch; }
.section-head h2{ font-size:clamp(30px,4vw,46px); }
.section-head p{ color:var(--ink-mute); font-size:16px; max-width:52ch; font-family:var(--font-sans); }
.reveal{ opacity:1; transform:none; }
html.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--easing), transform .8s var(--easing); }
html.js .reveal.in{ opacity:1; transform:translateY(0); }

/* ============ PORTFOLIO ============ */
#portfolio{ background:var(--canvas); }
.grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:20px;
  grid-auto-flow:dense;
}
.tile-hidden{ display:none; }
.pfilters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.pfilter{
  font-size:13px; padding:9px 16px; border-radius:var(--radius-pill);
  border:1px solid var(--hairline-strong); color:var(--ink-2); background:none;
  font-family:var(--font-sans); cursor:pointer;
  transition:border-color .25s var(--easing), color .25s var(--easing), background .25s var(--easing);
}
.pfilter:hover{ border-color:var(--navy); color:var(--navy); }
.pfilter[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:#fff; }
.pfilter-count{ opacity:0.55; margin-left:6px; font-size:12px; }
.portfolio-more-wrap{ display:flex; justify-content:center; margin-top:40px; }
.tile{
  position:relative; overflow:hidden; border-radius:var(--radius-sm);
  background:var(--canvas-deep); grid-column:span 6; aspect-ratio:4/5;
  cursor:pointer; box-shadow:var(--shadow-1);
}
@media (min-width:640px){
  .tile{ grid-column:span 3; }
  .tile.wide{ grid-column:span 6; aspect-ratio:16/9; }
}
@media (min-width:1000px){
  .tile{ grid-column:span 2; }
  .tile.wide{ grid-column:span 4; aspect-ratio:16/10; }
}
.tile-media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--easing);
}
.tile-placeholder{
  position:absolute; inset:0;
  background:linear-gradient(160deg, var(--canvas-deep) 0%, var(--hairline) 100%);
  display:flex; align-items:center; justify-content:center;
}
.tile-placeholder svg{ width:34px; height:34px; opacity:0.35; color:var(--ink-faint); }
.tile:hover .tile-media{ transform:scale(1.05); }
.tile-video-slot{ position:absolute; inset:0; z-index:1; overflow:hidden; }
.tile-video-embed{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); border:0; pointer-events:auto;
}
.play-badge{
  position:absolute; top:16px; right:16px; z-index:2;
  width:36px; height:36px; border-radius:50%; border:none; padding:0; margin:0;
  background:rgba(0,0,51,0.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  color:#fff; opacity:0.9; cursor:pointer;
  transition:opacity .2s var(--easing), background .2s var(--easing);
}
.play-badge:hover{ opacity:1; background:rgba(0,0,51,0.75); }
.play-badge:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.play-badge svg{ width:14px; height:14px; margin-left:2px; pointer-events:none; }
.tile-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,51,0) 45%, rgba(0,0,51,0.85) 100%);
}
.tile-info{ position:absolute; left:20px; right:20px; bottom:18px; z-index:2; }
.tile-info .tag{ font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--teal-300); font-weight:500; }
.tile-info .name{ font-family:var(--font-serif); font-size:20px; margin-top:6px; font-weight:400; color:#fff; }
/* Attribution for imagery shown by permission rather than shot by us. */
.tile-info .credit{ font-size:10.5px; color:rgba(255,255,255,0.62); margin-top:5px; letter-spacing:0.01em; }
/* viewfinder corner brackets — the signature motif */
.bracket{ position:absolute; width:22px; height:22px; border:1.5px solid var(--teal); opacity:0; pointer-events:none; transition:opacity .3s var(--easing), transform .3s var(--easing); z-index:3; }
.tile:hover .bracket{ opacity:1; }
.bracket.tl{ top:14px; left:14px; border-right:none; border-bottom:none; transform:translate(6px,6px); }
.bracket.tr{ top:14px; right:14px; border-left:none; border-bottom:none; transform:translate(-6px,6px); }
.bracket.bl{ bottom:14px; left:14px; border-right:none; border-top:none; transform:translate(6px,-6px); }
.bracket.br{ bottom:14px; right:14px; border-left:none; border-top:none; transform:translate(-6px,-6px); }
.tile:hover .bracket{ transform:translate(0,0); }

/* ============ TESTIMONIALS ============ */
#testimonials{ background:var(--canvas-soft); }
/* Founders — circular portraits beside the intro paragraph. The section
   head is a flex column with an 18px gap, so this only needs its own
   internal spacing. Two columns on wider screens, stacked below 520px. */
.founders{ display:flex; flex-wrap:wrap; gap:14px 40px; margin-top:12px; }
.founder{ display:flex; align-items:center; gap:14px; }
.founder picture{ display:block; flex-shrink:0; }
.founder img{
  width:72px; height:72px; border-radius:50%; object-fit:cover;
  border:1px solid var(--hairline-strong); background:var(--canvas-deep);
}
.founder-text{ display:flex; flex-direction:column; }
.founder-name{ font-size:14px; font-weight:600; color:var(--ink); line-height:1.3; }
.founder-role{
  font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--teal-700); margin-top:3px;
}
@media (max-width:519px){ .founders{ flex-direction:column; gap:16px; } }
.t-grid{ display:grid; gap:1px; background:var(--hairline); grid-template-columns:1fr; max-width:900px; margin:0 auto; }
@media (min-width:800px){ .t-grid{ grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); } }
.t-card{ background:var(--canvas); padding:40px 32px; display:flex; flex-direction:column; }
.t-mark{ font-family:var(--font-serif); font-size:44px; line-height:1; color:var(--teal-700); font-weight:600; margin-bottom:16px; }
.t-quote{ font-size:15.5px; color:var(--ink-2); flex-grow:1; }
.t-attrib{ margin-top:24px; padding-top:20px; border-top:1px solid var(--hairline); }
.logo-strip{ margin-top:56px; text-align:center; }
.logo-strip-label{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:24px; }
.logo-strip-row{ display:flex; align-items:center; justify-content:center; gap:48px; flex-wrap:wrap; }
.logo-strip-row picture{ display:flex; align-items:center; }
/* Client logos arrive at wildly different aspect ratios — a wordmark is
   ~2.4:1, a stacked monogram ~1.1:1. Sizing on height alone made the
   squarer one render at half the visual size, so both bounds are capped
   and the image scales to fit inside them. */
.logo-strip-row img{
  max-height:46px; max-width:160px; height:auto; width:auto; object-fit:contain;
  opacity:0.6; transition:opacity .25s var(--easing); filter:grayscale(1) brightness(0.4);
}
.logo-strip-row img:hover{ opacity:1; filter:none; }
.t-name{ font-size:14px; color:var(--ink); font-weight:600; }
.t-role{ font-size:12.5px; color:var(--ink-mute); margin-top:2px; }

/* ============ HOW WE WORK ============ */
#process{ background:var(--canvas); }
.process-grid{ display:grid; gap:40px; grid-template-columns:1fr; }
@media (min-width:800px){ .process-grid{ grid-template-columns:repeat(3,1fr); gap:36px; } }
.process-number{ font-family:var(--font-serif); font-size:26px; color:var(--teal-700); font-weight:400; letter-spacing:0; }
.process-title{ font-size:19px; color:var(--ink); font-weight:500; margin-top:10px; }
.process-step p{ font-size:14.5px; color:var(--ink-mute); margin-top:12px; }
.process-cta{ margin-top:56px; font-family:var(--font-serif); font-size:22px; font-weight:400; color:var(--ink); max-width:56ch; border-top:1px solid var(--hairline); padding-top:32px; }
/* The divider used to sit at margin-top:0, which put it at exactly the
   same y as the bottom of the last contact button — and because those
   buttons are pills, the rule appeared to slice through the curve.
   The grid above has no bottom spacing of its own, so the clearance has
   to come from here. */
.brief-form{ margin-top:72px; border-top:1px solid var(--hairline); padding-top:56px; }
.brief-form-head{ max-width:60ch; margin-bottom:36px; }
.brief-form-head h3{ font-size:clamp(22px,3vw,28px); font-weight:400; }
.brief-form-head p{ color:var(--ink-mute); font-size:14.5px; margin-top:12px; }
.form-grid{ display:grid; grid-template-columns:1fr; gap:20px; max-width:760px; }
@media (min-width:640px){ .form-grid{ grid-template-columns:1fr 1fr; } }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field.full{ grid-column:1/-1; }
.form-field label{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-mute); }
.form-field input, .form-field select, .form-field textarea{
  background:var(--canvas); border:1px solid var(--hairline-strong); color:var(--ink);
  padding:12px 14px; font-family:var(--font-sans); font-size:14.5px;
  border-radius:var(--radius-sm); transition:border-color .25s var(--easing);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--navy);
}
.form-field textarea{ resize:vertical; min-height:90px; }
.checkbox-row{ display:flex; flex-wrap:wrap; gap:10px; }
.checkbox-row label{
  display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2);
  text-transform:none; letter-spacing:0; border:1px solid var(--hairline-strong); padding:9px 14px;
  border-radius:var(--radius-pill); cursor:pointer; transition:border-color .25s var(--easing), color .25s var(--easing);
}
.checkbox-row input{ accent-color:var(--navy); width:14px; height:14px; }
.checkbox-row label:has(input:checked){ border-color:var(--navy); color:var(--navy); }
.form-submit-row{ margin-top:8px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.form-status{ font-size:13.5px; }
.form-status.ok{ color:var(--teal-700); }
.form-status.err{ color:#D5334F; }

/* ============ PRICES ============ */
#prices{ background:var(--canvas-soft); }
.price-grid{ display:grid; gap:1px; background:var(--hairline); grid-template-columns:1fr; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-1); }
/* minmax(0,1fr), not 1fr. A bare 1fr is minmax(auto,1fr), so a column can
   grow past its share to fit its widest unbreakable content — and .btn is
   white-space:nowrap, so the longest CTA was stretching column three to
   415px against the others' 359px. Harmless while the cards were text
   only; once each card carries a fixed-aspect image, unequal widths
   become unequal heights and the rows visibly fall out of step. */
@media (min-width:900px){ .price-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.price-card{
  background:var(--canvas); padding:44px 36px; display:flex; flex-direction:column;
  position:relative;
}
.price-card.featured{ background:var(--dark-900); }
.price-card.featured .price-name, .price-card.featured .price-for{ color:#fff; }
.price-card.featured .price-list li{ color:rgba(255,255,255,0.75); }
.price-card.featured .price-tier{ color:rgba(255,255,255,0.5); }
/* z-index keeps the badge above the card image, which now bleeds to the
   top edge and would otherwise paint over it. */
.price-card.featured::before{
  content:'MOST BOOKED'; position:absolute; top:0; right:0; z-index:2; font-size:10px; letter-spacing:0.14em;
  font-weight:600; color:#04201D; background:var(--teal); padding:6px 12px; border-radius:0 0 0 var(--radius-sm);
}
/* Package imagery bleeds to the card edges — negative margins cancel the
   card's own padding rather than the card dropping its padding, so the
   text below stays aligned across all three cards. */
.price-media{ margin:-44px -36px 28px; aspect-ratio:16/10; overflow:hidden; background:var(--canvas-deep); }
.price-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.price-card.featured .price-media{ background:var(--dark-panel); }
.price-tier{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-faint); }
.price-name{ font-family:var(--font-serif); font-size:30px; font-weight:400; margin-top:10px; color:var(--ink); }
.price-figure{ font-size:15px; color:var(--teal-700); font-weight:600; margin-top:8px; }
/* A placeholder rather than a confirmed figure — reads as secondary. */
.price-figure-note{ color:var(--ink-mute); font-weight:500; }
.price-card.featured .price-figure{ color:var(--teal-300); }
/* Reserves two lines so the bullet lists start at the same height on all
   three cards — "Developers, hotels & multi-property portfolios" wraps
   where the shorter audience lines don't. Keeps them aligned whatever
   this copy becomes later. */
.price-for{ font-size:13.5px; color:var(--ink-mute); margin-top:10px; min-height:3.2em; }
.price-list{ margin-top:28px; display:flex; flex-direction:column; gap:13px; flex-grow:1; }
.price-list li{ font-size:14px; color:var(--ink-2); display:flex; gap:10px; align-items:flex-start; }
.price-list li::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--teal-700); margin-top:7px; flex-shrink:0; }
.price-card.featured .price-list li::before{ background:var(--teal); }
.price-card .btn{ margin-top:32px; justify-content:center; }
.price-card.featured .btn{ border-color:rgba(255,255,255,0.5); color:#fff; }
.price-card.featured .btn:hover{ background:rgba(255,255,255,0.12); }
.price-card.featured .btn.solid{ background:#fff; border-color:#fff; color:var(--navy); }
.price-card.featured .btn.solid:hover{ background:rgba(255,255,255,0.88); border-color:rgba(255,255,255,0.88); color:var(--navy); }

.custom-callout{
  margin-top:1px; background:var(--canvas); border:1px solid var(--hairline);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-1);
  padding:28px 32px; display:flex; flex-direction:column; gap:20px; align-items:flex-start;
}
@media (min-width:700px){ .custom-callout{ flex-direction:row; align-items:center; justify-content:space-between; } }
.custom-callout-title{ font-size:16px; color:var(--ink); font-weight:600; }
.custom-callout p{ font-size:13.5px; color:var(--ink-mute); margin-top:6px; max-width:52ch; }
.custom-callout .btn{ flex-shrink:0; }

/* ============ CONTACT ============ */
#contact{ background:var(--canvas); }
.contact-grid{ display:grid; gap:64px; grid-template-columns:1fr; }
@media (min-width:900px){ .contact-grid{ grid-template-columns:1.1fr 0.9fr; } }
.contact-lead h2{ font-size:clamp(30px,4vw,48px); max-width:14ch; }
.contact-lead p{ margin-top:22px; color:var(--ink-mute); max-width:44ch; font-size:15px; }
.contact-actions{ display:flex; flex-direction:column; gap:14px; margin-top:40px; max-width:340px; }
.contact-actions .btn{ justify-content:space-between; padding:16px 22px; }
.contact-actions .btn svg{ width:16px; height:16px; }

.areas-label{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--teal-700); font-weight:600; margin-bottom:18px; }
.areas{ display:flex; flex-wrap:wrap; gap:10px; }
.also-shooting-line{ margin-top:24px; font-size:12px; color:var(--ink-faint); }
.areas span{
  font-size:13px; padding:9px 16px; border-radius:var(--radius-pill); border:1px solid var(--hairline-strong); color:var(--ink-2);
}
/* align-self:start stops the panel being stretched to match the taller
   left column — it was rendering ~510px tall around ~190px of content. */
.contact-panel{ background:var(--canvas-soft); border-radius:var(--radius-lg); padding:36px; }
@media (min-width:900px){ .contact-panel{ align-self:start; } }

/* ============ FOOTER ============ */
/* Extra bottom padding above 640px keeps the last footer row clear of the
   floating WhatsApp button, which sits at right:24px / bottom:24px. */
footer{ background:var(--dark-900); padding:64px 0 36px; }
@media (min-width:641px){ footer{ padding-bottom:104px; } }
footer .wrap{ display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center; }
@media (min-width:640px){ footer .wrap{ flex-direction:row; justify-content:space-between; text-align:left; } }
footer .fw{ display:flex; align-items:center; gap:12px; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--dark-text-mute); }
footer .fw .logo-img{ height:32px; opacity:0.95; }
footer .flinks{ display:flex; gap:12px; }
.icon-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--hairline-strong);
  display:flex; align-items:center; justify-content:center; color:var(--ink-mute);
  transition:border-color .25s var(--easing), color .25s var(--easing);
}
.icon-btn svg{ width:17px; height:17px; }
.icon-btn:hover{ border-color:var(--teal); color:var(--ink); }
footer .icon-btn{ border-color:var(--dark-hairline); color:var(--dark-text-mute); }
footer .icon-btn:hover{ border-color:var(--teal); color:#fff; }
/* The legal row used to be `class="wrap legal-links"`, so `footer .wrap`
   (0,1,1) out-specified `.legal-links` (0,1,0) and forced
   justify-content:space-between — the four links stretched the full width
   of the footer. The row now lives inside its own .wrap so the two rules
   stop fighting. `footer .wrap.legal-wrap` is deliberately more specific
   than the `footer .wrap` flex rules above. */
footer .wrap.legal-wrap{
  display:block; margin-top:18px; padding-top:18px;
  border-top:1px solid var(--dark-hairline);
}
.legal-links{
  display:flex; flex-wrap:wrap; gap:20px; justify-content:center;
}
@media (min-width:640px){ .legal-links{ justify-content:flex-start; } }
.legal-links a{ font-size:12px; color:var(--dark-text-mute); text-decoration:none; }
.legal-links a:hover{ color:#fff; }

/* ============ FLOATING WHATSAPP ============ */
.wa-float{ position:fixed; right:24px; bottom:24px; z-index:150; display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
@media (max-width:640px){ .wa-float{ display:none; } } /* mobile already has the sticky bar */
.wa-float-btn{
  width:56px; height:56px; border-radius:50%; background:var(--teal);
  display:flex; align-items:center; justify-content:center; color:#04201D;
  box-shadow:var(--shadow-2); transition:transform .25s var(--easing);
}
.wa-float-btn:hover{ transform:scale(1.06); }
.wa-float-btn svg{ width:27px; height:27px; }
.wa-float-bubble{
  max-width:230px; background:var(--canvas); border:1px solid var(--hairline);
  border-radius:var(--radius-md); box-shadow:var(--shadow-2); padding:16px 34px 16px 16px; position:relative;
  opacity:0; transform:translateY(8px) scale(0.97); pointer-events:none;
  transition:opacity .3s var(--easing), transform .3s var(--easing);
}
.wa-float-bubble.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.wa-float-bubble p{ font-size:13px; color:var(--ink-2); margin:0; }
.wa-float-bubble .btn{ display:none; } /* not used here, kept for CSS-rule safety */
.wa-float-close{
  position:absolute; top:8px; right:10px; background:none; border:none;
  color:var(--ink-faint); font-size:16px; line-height:1; cursor:pointer; padding:4px;
}
.wa-float-close:hover{ color:var(--ink); }

/* ============ COOKIE BANNER ============ */
.cookie-banner{
  display:none; position:fixed; left:16px; right:16px; bottom:16px; z-index:200;
  max-width:520px; margin:0 auto; background:var(--canvas); border:1px solid var(--hairline);
  padding:20px 22px; border-radius:var(--radius-md); box-shadow:var(--shadow-2);
}
.cookie-banner.show{ display:block; }
/* Below 640px the sticky CTA bar owns the bottom of the screen, so the
   banner has to sit above it rather than underneath. */
@media (max-width:640px){ .cookie-banner{ bottom:84px; } }
.cookie-banner p{ font-size:13px; color:var(--ink-2); margin:0 0 14px; }
.cookie-banner p a{ color:var(--teal-700); }
.cookie-banner-actions{ display:flex; gap:12px; }
.cookie-banner-actions .btn{ padding:9px 18px; font-size:11px; }

/* ============ MOBILE STICKY CTA ============ */
.mobile-cta{ display:none; }
@media (max-width:640px){
  .mobile-cta{
    display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:90;
    padding:12px; background:rgba(0,0,51,0.94); backdrop-filter:blur(10px);
    border-top:1px solid var(--dark-hairline);
  }
  .mobile-cta .btn{ flex:1; justify-content:center; padding:13px 10px; }
  /* leave room so the bar never covers the last bit of content */
  body{ padding-bottom:72px; }
}

/* ==========================================================================
   NAV — services dropdown
   Hover-opened on pointer devices, click/focus-opened for keyboard and touch.
   The panel is rendered in the flow of the mobile menu instead of floating,
   because a fixed dropdown inside a full-screen mobile nav is unusable.
   ========================================================================== */
.has-sub{ position:relative; }
.subtoggle{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-sans); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; font-weight:500; color:rgba(255,255,255,0.82);
  padding:4px 0; background:none; border:none; cursor:pointer;
  transition:color .25s var(--easing);
}
header.solid .subtoggle{ color:var(--ink-2); }
header.solid .subtoggle:hover{ color:var(--navy); }
.subtoggle:hover{ color:#fff; }
.subtoggle svg{ width:9px; height:9px; transition:transform .25s var(--easing); }
.has-sub[data-open="true"] .subtoggle svg{ transform:rotate(180deg); }

@media (min-width:880px){
  .submenu{
    position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-6px);
    min-width:200px; background:var(--canvas); border:1px solid var(--hairline);
    border-radius:var(--radius-md); box-shadow:var(--shadow-2); padding:8px;
    display:flex; flex-direction:column; gap:2px;
    opacity:0; pointer-events:none; transition:opacity .22s var(--easing), transform .22s var(--easing);
  }
  .has-sub[data-open="true"] .submenu{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
  .submenu a{
    font-size:12px; letter-spacing:0.1em; text-transform:uppercase; font-weight:500;
    color:var(--ink-2) !important; padding:10px 14px; border-radius:var(--radius-sm);
    transition:background .2s var(--easing), color .2s var(--easing);
  }
  .submenu a::after{ display:none; }
  .submenu a:hover{ background:var(--canvas-soft); color:var(--navy) !important; }
  .submenu a[aria-current="page"]{ background:var(--canvas-soft); color:var(--navy) !important; }
}
@media (max-width:879px){
  .submenu{ display:none; flex-direction:column; align-items:center; gap:18px; margin-top:18px; }
  .has-sub[data-open="true"] .submenu{ display:flex; }
  .submenu a{ font-size:16px; color:rgba(255,255,255,0.75); }
}

/* ==========================================================================
   SERVICE PAGE TEMPLATE
   Shared by every service page: a light hero, alternating type sections, and
   a cross-link row. Deliberately lighter on prose than the reference site —
   short intros, real work doing the talking.
   ========================================================================== */
.svc-hero{ padding:150px 0 88px; background:var(--canvas-soft); }
.svc-hero-grid{ display:grid; gap:48px; grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .svc-hero-grid{ grid-template-columns:0.95fr 1.05fr; gap:64px; } }
.svc-hero h1{ font-size:clamp(38px,5.4vw,64px); line-height:1.04; margin-top:18px; }
.svc-hero h1 .lead{ display:block; font-size:0.44em; letter-spacing:0.02em; color:var(--ink-mute); font-family:var(--font-sans); font-weight:500; text-transform:uppercase; margin-bottom:12px; }
.svc-points{ display:flex; flex-direction:column; gap:12px; margin-top:28px; }
.svc-points li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-2); }
.svc-points svg{ width:16px; height:16px; flex-shrink:0; margin-top:4px; color:var(--teal-700); }
.svc-price{ margin-top:28px; font-size:15px; color:var(--ink-2); }
.svc-price strong{ color:var(--navy); font-weight:600; }
.svc-hero-actions{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.svc-hero-media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-2); aspect-ratio:4/3; }
.svc-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.svc-section{ padding:88px 0; }
.svc-section:nth-of-type(even){ background:var(--canvas-soft); }
.svc-head{ max-width:60ch; margin-bottom:44px; }
.svc-head h2{ font-size:clamp(26px,3.4vw,40px); margin-top:14px; }
.svc-head p{ color:var(--ink-mute); font-size:15.5px; margin-top:14px; max-width:54ch; }

/* Cross-links to the other services, so a page is never a dead end. */
.svc-next{ background:var(--dark-900); padding:72px 0; }
.svc-next h2{ color:#fff; font-size:clamp(24px,3vw,34px); margin-bottom:36px; }
.svc-next-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:700px){ .svc-next-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.svc-next-card{
  border:1px solid var(--dark-hairline); border-radius:var(--radius-lg); padding:28px;
  display:flex; flex-direction:column; gap:10px;
  transition:border-color .25s var(--easing), background .25s var(--easing);
}
.svc-next-card:hover{ border-color:var(--teal); background:rgba(255,255,255,0.03); }
.svc-next-card .n{ font-family:var(--font-serif); font-size:24px; color:#fff; font-weight:400; }
.svc-next-card p{ font-size:14px; color:var(--dark-text-mute); }
.svc-next-card .go{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--teal); margin-top:6px; }

/* ==========================================================================
   SERVICE CARDS — the home page's routes into the work.
   Three across on one line from 700px up. The media is 16/9 rather than
   16/10 so a card at a third of the width stays wide rather than becoming a
   tall column, and padding tightens between 700 and 900 where the columns
   are at their narrowest.
   ========================================================================== */
.svc-cards{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:700px){ .svc-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } }
@media (min-width:1000px){ .svc-cards{ gap:24px; } }
.svc-card{
  display:flex; flex-direction:column; background:var(--canvas);
  border:1px solid var(--hairline); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-1);
  transition:transform .35s var(--easing), box-shadow .35s var(--easing), border-color .35s var(--easing);
}
.svc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--hairline-strong); }
.svc-card-media{ aspect-ratio:16/9; overflow:hidden; background:var(--canvas-deep); position:relative; }
.svc-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--easing); }
.svc-card:hover .svc-card-media img{ transform:scale(1.04); }
.svc-card-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex-grow:1; }
@media (min-width:1000px){ .svc-card-body{ padding:28px 30px 30px; } }
.svc-card-body h3{ font-size:24px; font-weight:400; }
@media (min-width:1000px){ .svc-card-body h3{ font-size:26px; } }
.svc-card-body p{ font-size:14.5px; color:var(--ink-mute); margin-top:10px; flex-grow:1; }
.svc-card .btn{ margin-top:22px; align-self:flex-start; }

/* ==========================================================================
   CAPABILITY CARDS — what a service covers, before there's imagery for it.
   Typographic only by design: these describe capabilities rather than show
   work, and an empty image well would read as a missing asset. A .cap-media
   block can be added to each card once there are stills to put in them.
   ========================================================================== */
.cap-cards{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:700px){ .cap-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.cap-card{
  background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--radius-lg);
  padding:30px 28px 32px; display:flex; flex-direction:column;
  transition:border-color .3s var(--easing), transform .3s var(--easing);
}
.cap-card:hover{ border-color:var(--hairline-strong); transform:translateY(-3px); }
.cap-num{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--teal-700); font-weight:600; }
.cap-card h3{ font-size:22px; font-weight:400; margin-top:14px; }
.cap-card p{ font-size:14.5px; color:var(--ink-mute); margin-top:12px; }


/* ==========================================================================
   GALLERY CAROUSEL — one horizontal rail per section
   Replaced a stacked grid. Native overflow scrolling does the work, so
   trackpad, touch swipe and keyboard all behave without JS; the arrows are
   an enhancement on top and wrap around at either end so the rail reads as
   continuous.
   No scroll-snap here, deliberately. Both mandatory and proximity snapping
   dragged an arrow-driven scroll back to the frame it started on, so the
   buttons appeared dead. The arrows move by an exact tile width, so snapping
   was buying nothing.
   scroll-behavior is deliberately NOT set here either. When the browser
   isn't painting frames, a smooth scroll simply never happens and the rail
   doesn't move at all — the buttons look broken. app.js asks for a smooth
   scroll and then guarantees the landing position, so the worst case is an
   instant jump rather than nothing.
   ========================================================================== */
.gallery{ position:relative; }
.car-track{
  display:flex; gap:20px; overflow-x:auto; overscroll-behavior-x:contain;
  padding:2px 2px 6px; margin:0 -2px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.car-track::-webkit-scrollbar{ display:none; }
.car-track .tile{
  flex:0 0 auto; width:min(84vw, 480px); aspect-ratio:3/2;
  margin:0; grid-column:auto;
  position:relative; overflow:hidden; border-radius:var(--radius-sm);
  background:var(--canvas-deep); box-shadow:var(--shadow-1);
}
@media (min-width:700px){ .car-track .tile{ width:min(46vw, 470px); } }
.car-track .tile .tile-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.car-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:46px; height:46px; border-radius:50%; padding:0;
  background:rgba(255,255,255,0.94); border:1px solid var(--hairline-strong);
  color:var(--ink); display:none; align-items:center; justify-content:center;
  box-shadow:var(--shadow-2); cursor:pointer;
  transition:background .2s var(--easing), border-color .2s var(--easing), transform .2s var(--easing);
}
.car-btn:hover{ background:#fff; border-color:var(--navy); transform:translateY(-50%) scale(1.06); }
.car-btn svg{ width:17px; height:17px; }
.car-btn.prev{ left:-14px; }
.car-btn.next{ right:-14px; }
/* Only offered where there is room for them to sit outside the rail and a
   pointer to click them with; touch users swipe instead. */
@media (min-width:900px){ .gallery[data-carousel="on"] .car-btn{ display:flex; } }

.car-hint{
  margin-top:14px; font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-faint); display:flex; align-items:center; gap:8px;
}
@media (min-width:900px){ .car-hint{ display:none; } }

/* ==========================================================================
   SINGLE-ITEM SECTION — text beside the work, not above a lonely tile
   A section holding one clip left the head on the left and a single tile
   below it with the whole right half of the row empty. Pairing them side by
   side fills the row.
   The tile deliberately keeps the standard .tile aspect rather than being
   forced landscape: most of these clips are vertical, and a 3:2 frame cut
   away half of them. It is capped and centred so a portrait tile doesn't
   balloon to the full column width. Stacks below 900px.
   ========================================================================== */
@media (min-width:900px){
  .svc-section.is-single .wrap{ display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; }
  .svc-section.is-single .svc-head{ margin-bottom:0; max-width:none; }
  .svc-section.is-single .grid{ grid-template-columns:1fr; }
  /* justify-self, not margin:0 auto. Every child of .tile is absolutely
     positioned, so its content width is zero — auto margins make the box
     shrink-to-fit and it collapses to 0x0. An explicit width plus max-width
     gives it a definite size; justify-self does the centring. */
  .svc-section.is-single .grid .tile{ grid-column:1 / -1; width:100%; max-width:400px; justify-self:center; }
}

/* ==========================================================================
   HOW WE WORK — three steps on one line, portrait frame beside them
   The steps keep their own three-column row; the image sits alongside the
   whole block rather than forcing the steps to stack. Step text drops a
   little between 1000 and 1200px, where three columns share a narrower
   container. Below 1000px the image moves under the text, capped so a 2:3
   portrait doesn't run the length of a phone screen.
   ========================================================================== */
@media (min-width:1000px){
  .process-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:56px; align-items:stretch; }
  .process-media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-1); }
  .process-media picture{ display:block; height:100%; }
  .process-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  .process-grid{ gap:28px; }
  .process-title{ font-size:17.5px; }
  .process-step p{ font-size:13.5px; }
}
@media (min-width:1200px){
  .process-layout{ grid-template-columns:minmax(0,1fr) 360px; gap:64px; }
  .process-title{ font-size:19px; }
  .process-step p{ font-size:14.5px; }
}
@media (max-width:999px){
  .process-media{ margin-top:40px; border-radius:var(--radius-lg); overflow:hidden; max-width:340px; }
  .process-media img{ width:100%; height:auto; display:block; }
}