:root{
  --ink:#3D1049;
  --paper:#FDFBF8;
  --plum:#561269;
  --lime:#D3FF99;
  --ruby:#CC0000;
  --stone:#6A5D73;
  --line: rgba(36,19,41,0.14);
  --tile1:#EFE6D8; --tile2:#E8D9EC; --tile3:#F0F2DC; --tile4:#EAE2D0;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:44px; --s6:64px; --s7:110px; --s8:150px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
[id]{ scroll-margin-top: 90px; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Montserrat', sans-serif;
  font-weight:300;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
a{color:inherit;}
img{display:block; max-width:100%;}
.label, .kicker, .role, .back{ font-family:'Poppins',sans-serif; }
.label::before, .kicker::before{
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--ruby); margin-right:8px; vertical-align:middle;
}
.wrap{max-width:1180px; margin:0 auto; padding-left:var(--s4); padding-right:var(--s4);}

/* every direct section gets generous, consistent breathing room */
section{padding:var(--s7) 0;}
section + section{border-top:1px solid var(--line);}
.team{ padding-top:var(--s6); }
p{line-height:1.7;}
h1,h2,h3{line-height:1.3;}

/* ---------- NAV ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--s3) var(--s4);
  background:#ffffff;
  backdrop-filter:blur(8px);
}
.logo{
  display:inline-flex; align-items:center;
  text-decoration:none;
  /* padded hit area — the wordmark itself is only ~21px tall */
  min-height:44px;
}
.logo img{
  height:21px;
  width:auto;
  display:block;
}
.navlinks{display:flex; align-items:center; gap:var(--s5); font-family:'Poppins',sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:0.1em; font-weight:600;}
.navlinks a{text-decoration:none; color:var(--ink); opacity:0.7; transition:opacity 0.2s ease, border-color 0.2s ease; padding-bottom:3px; border-bottom:1px solid transparent;}

.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  /* 44px hit area to meet tap-target guidance; the bars stay 34px wide */
  width:44px; height:44px;
  margin-right:calc(var(--s1) * -1);
  background:none; border:none; cursor:pointer; padding:0;
}
.nav-toggle span{
  display:block; width:34px; height:2px; background:var(--ink);
  border-radius:2px; transition:transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:820px){
  .nav-toggle{ display:flex; }
  .navlinks{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:#ffffff;
    border-top:1px solid var(--line);
    box-shadow:0 12px 24px rgba(36,19,41,0.16);
    max-height:0; overflow:hidden;
    transition:max-height 0.3s ease;
  }
  .navlinks.is-open{ max-height:400px; }
  .navlinks a{
    width:100%; padding:16px var(--s4);
    color:var(--plum);
    opacity:1;
    border-bottom:1px solid var(--line);
  }
  .navlinks a:hover{ opacity:1; border-color:var(--plum); background:rgba(86,18,105,0.05); }
  .navlinks a.current{
    border-radius:0; background:rgba(211,255,153,0.45);
    color:var(--plum); border-bottom:1px solid var(--line); padding:16px var(--s4);
    font-weight:700;
  }
}
.navlinks a:hover{opacity:1; border-color:var(--plum);}
.navlinks a:focus-visible, .logo:focus-visible{outline:2px solid var(--plum); outline-offset:4px;}

/* ---------- RIBBON ---------- */
.ticker{
  margin-top:64px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#F2F6E0;
  overflow:hidden;
  white-space:nowrap;
  padding:12px 0;
}
.ticker-track{ display:inline-flex; animation: scroll 34s linear infinite; }
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ticker-item{
  font-family:'Poppins',sans-serif;
  font-size:11.5px; letter-spacing:0.09em; text-transform:uppercase; font-weight:600;
  color:var(--ink); padding:0 var(--s4);
  border-right:1px solid rgba(36,19,41,0.14);
  display:inline-flex; align-items:center; gap:9px;
}
.ticker-item em{color:var(--plum); font-style:italic; font-weight:600;}
.ticker-item .dot{width:5px; height:5px; border-radius:50%; background:var(--ruby); display:inline-block;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding-top:var(--s8); padding-bottom:var(--s7); color:var(--ink);
  /* full-height so the petal photo reads at the scale shown in the mockup —
     with background-size:cover, a taller section scales the image up */
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  background:
    linear-gradient(rgba(255,255,255,0.18), rgba(255,255,255,0.18)),
    url('hero-bg-petals.jpg');
  background-size:cover;
  background-position:center;
}
/* softens the hard cut between the petal photo and the video band below,
   fading into the band's own cream (sampled, not guessed) */
.hero::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:100px;
  background:linear-gradient(to bottom, rgba(235,227,213,0) 0%, rgb(235,227,213) 100%);
  pointer-events:none;
  z-index:0;
}
.hero > .wrap{ width:100%; position:relative; z-index:1; }
.hero .eyebrow{
  font-family:'Poppins',sans-serif;
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--plum); font-weight:700; margin-bottom:var(--s4);
  display:flex; align-items:center; gap:10px;
}
.hero .eyebrow::before{
  content:'';
  width:8px; height:8px; min-width:8px;
  aspect-ratio:1/1;
  flex:0 0 8px;
  border-radius:50%;
  background:var(--plum);
}
/* headline sits directly on the petal photo — measured 10:1 contrast at its
   darkest patch, so it holds without a scrim behind it */
.hero h1{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:clamp(38px, 6.2vw, 82px);
  line-height:1.08;
  letter-spacing:-0.025em;
  text-transform:uppercase;
  max-width:900px;
  color:#111111;
}
.hero h1 em{ font-family:'Poppins',sans-serif; font-weight:700; font-style:normal; color:#111111; letter-spacing:-0.025em; }
.hero-layout{
  display:grid; grid-template-columns:1.05fr 0.95fr;
  gap:var(--s6) var(--s7);
  align-items:end;
}
@media (max-width:900px){
  .hero-layout{ grid-template-columns:1fr; gap:var(--s5); align-items:start; }
}
.hero-aside{ padding-bottom:var(--s2); }
.hero .sub{
  margin-top:var(--s5);
  max-width:none;
  font-family:'Montserrat',sans-serif;
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
}
.hero .cta-row{ margin-top:var(--s6); display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ruby); color:#ffffff;
  padding:15px 28px;
  font-family:'Poppins',sans-serif;
  font-weight:600; font-size:12.5px;
  text-transform:uppercase; letter-spacing:0.07em;
  text-decoration:none;
  border:1px solid var(--ruby);
  border-radius:100px;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover{background:var(--lime); border-color:var(--lime); color:var(--plum);}
.btn:focus-visible{outline:2px solid var(--lime); outline-offset:4px;}
/* hero primary button: plum solid on the pale photo, highlighting into ruby
   on hover (lime would wash out against a near-white background) */
.hero .btn:not(.ghost){ background:var(--lime); color:var(--plum); border-color:var(--lime); }
.hero .btn:not(.ghost):hover{ background:var(--ruby); color:#ffffff; border-color:var(--ruby); }
.btn.ghost{background:transparent; border:1px solid var(--plum); color:var(--plum);}
.btn.ghost:hover{background:var(--lime); color:var(--plum); border-color:var(--lime);}
/* hero now sits on a pale photo, so the ghost button switches from white
   (invisible here) to plum, matching the ghost treatment used site-wide */
.hero .btn.ghost{background:var(--plum); color:#ffffff; border-color:var(--plum);}
.hero .btn.ghost:hover{background:var(--ruby); color:#ffffff; border-color:var(--ruby);}

/* ---------- CLIENTS ---------- */
.clients .label{
  font-size:13px; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--stone); font-weight:600; margin-bottom:var(--s5);
}
.clientlist{ display:flex; flex-wrap:wrap; column-gap:var(--s6); row-gap:var(--s4); }
.clientlist span{
  font-family:'Lora',serif; font-weight:400; font-style:italic;
  font-size:clamp(20px, 2.8vw, 30px);
  color:var(--ink); opacity:0.3;
  transition:opacity 0.25s ease, color 0.25s ease;
  cursor:default;
}
.clientlist span:hover{opacity:1; color:var(--plum);}

/* ---------- APPROACH ---------- */
.approach-head{ max-width:620px; margin-bottom:var(--s6); }
.approach-head .kicker{
  font-size:15.6px; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--ruby); font-weight:700; margin-bottom:var(--s4);
}
.approach-head h2{
  font-family:'Lora',serif; font-weight:400;
  font-size:clamp(24px,2.9vw,36px); line-height:1.25; letter-spacing:0.01em;
  text-transform:uppercase;
}
.approach-head h2::after{
  content:''; display:block;
  width:56px; height:3px; background:var(--ruby);
  margin-top:var(--s3);
}
.approach-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6);
}
@media (max-width:860px){ .approach-grid{grid-template-columns:1fr; gap:var(--s5);} }
.approach-card{
  padding:var(--s5) 0 0;
  border-top:1px solid var(--line);
  transition:border-color 0.25s ease;
}
.approach-card .n{
  font-family:'Lora',serif; font-style:italic; font-size:15px;
  color:var(--plum); margin-bottom:var(--s3); display:block;
}
.approach-card h3{
  font-size:18px; font-weight:600; letter-spacing:0.01em; margin-bottom:var(--s3);
}
.approach-card p{ color:var(--stone); font-size:14.5px; line-height:1.75; }

/* ---------- STATEMENT ---------- */
.statement p{
  font-family:'Lora',serif; font-weight:400;
  font-size:clamp(26px, 4.6vw, 54px);
  line-height:1.4; max-width:980px;
  margin-bottom:var(--s2);
}
.statement p .fade{color:var(--stone); opacity:0.6;}
.statement p em{color:var(--ruby); font-style:italic;}

/* ---------- COLLAGE / MOMENTS ---------- */
.moments-head{ max-width:620px; margin-bottom:var(--s6); }
.moments-head h2{
  font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:-0.015em;
  font-size:clamp(27px,3.2vw,40px); line-height:1.25;
}
.moments-head p{ color:var(--stone); margin-top:var(--s3); max-width:520px; font-size:15px; }
.collage{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:110px;
  gap:var(--s3);
}
.collage-tile{
  border-radius:14px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--s3);
  position:relative;
  overflow:hidden;
  color:var(--ink);
}
.collage-tile.t1{grid-column:span 3; grid-row:span 3; background:var(--tile1);}
.collage-tile.t2{grid-column:span 3; grid-row:span 2; background:var(--tile2);}
.collage-tile.t3{grid-column:span 3; grid-row:span 2; background:var(--tile3);}
.collage-tile.t4{grid-column:span 3; grid-row:span 3; background:var(--tile4);}
.collage-tile.t5{grid-column:span 2; grid-row:span 2; background:var(--tile3);}
.collage-tile.t6{grid-column:span 2; grid-row:span 2; background:var(--tile1);}
.collage-tile.t7{grid-column:span 2; grid-row:span 2; background:var(--tile2);}
@media (max-width:760px){
  .collage{grid-template-columns:repeat(2,1fr); grid-auto-rows:140px;}
  .collage-tile.t1,.collage-tile.t2,.collage-tile.t3,.collage-tile.t4{grid-column:span 2;}
  .collage-tile.t5,.collage-tile.t6,.collage-tile.t7{grid-column:span 1;}
}
.collage-tile .cap{
  font-size:12px; text-transform:uppercase; letter-spacing:0.08em; font-weight:700;
  color:var(--ink); opacity:0.55;
}
.collage-tile .cap span{display:block; font-weight:500; opacity:0.8; margin-top:4px; text-transform:none; letter-spacing:0; font-size:13px;}

/* ---------- TEAM ---------- */
.team .label{
  font-size:13px; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--stone); font-weight:600; margin-bottom:var(--s4);
}
.team-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); }
@media (max-width:860px){ .team-grid{grid-template-columns:1fr; gap:var(--s4);} }
.person{ padding-top:0; border-top:none; }
@media (max-width:860px){ .person{ padding-top:var(--s4); border-top:1px solid var(--line); } .person:first-child{ padding-top:0; border-top:none; } }
.person h3{ font-family:'Lora',serif; font-weight:400; font-size:26px; }
.person .role{
  color:var(--plum); font-size:12.5px; text-transform:uppercase;
  letter-spacing:0.09em; font-weight:700; margin-top:var(--s2); display:block;
}
.person p{ color:var(--stone); margin-top:var(--s3); line-height:1.75; font-size:14.5px; max-width:420px; }

/* ---------- CTA TEASER (home page, links to contact page) ---------- */

/* ---------- FOOTER (site-wide bottom bar) ---------- */
footer{ padding-top:var(--s6); padding-bottom:var(--s6); }
footer .bottom{
  display:flex; justify-content:space-between; color:var(--stone); font-size:11.5px;
  flex-wrap:wrap; gap:var(--s2); text-transform:uppercase; letter-spacing:0.07em;
}
@media (max-width:860px){
  footer .bottom{
    justify-content:center;
    text-align:center;
    font-size:8px;
  }
}
.footer-social a{
  color:var(--stone); text-decoration:none;
}
.footer-social a:hover{ color:var(--plum); }

/* ---------- CONTACT PAGE ---------- */
.contact-hero{ padding-top:var(--s8); padding-bottom:var(--s7); }
.contact-hero .eyebrow{
  font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--plum); font-weight:700; margin-bottom:var(--s4);
  display:flex; align-items:center; gap:10px;
}
.contact-hero h1{
  font-family:'Lora',serif; font-weight:400; font-style:italic;
  font-size:clamp(36px, 6vw, 72px); line-height:1.3; max-width:760px;
}
.contact-hero p{ margin-top:var(--s5); max-width:480px; color:var(--stone); font-size:17px; line-height:1.7; }

.contact-layout{
  display:grid; grid-template-columns:1.3fr 1fr; gap:var(--s7);
}
@media (max-width:860px){ .contact-layout{grid-template-columns:1fr; gap:var(--s6);} }

.hidden-field{ position:absolute; left:-9999px; }

.contact-form .field{ margin-bottom:var(--s4); }
.contact-form label{
  display:block; font-size:13px; text-transform:uppercase; letter-spacing:0.08em;
  font-weight:600; color:var(--stone); margin-bottom:var(--s1);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%;
  font-family:'Inter',sans-serif;
  font-size:15px;
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  padding:var(--s2) 0;
  outline:none;
  transition:border-color 0.2s ease;
  resize:vertical;
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-color:var(--lime);
}
.contact-form button{ margin-top:var(--s2); border:none; cursor:pointer; }
.form-status{ margin-top:var(--s3); font-size:14px; color:var(--stone); }
.form-status.success{ color:var(--plum); font-weight:600; }
.form-status.error{ color:#B5544A; font-weight:600; }

.contact-side{ display:flex; flex-direction:column; gap:var(--s6); }
.contact-block{ padding-top:var(--s5); border-top:1px solid var(--line); }
.contact-block .label{
  font-size:13px; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--stone); font-weight:600; margin-bottom:var(--s4);
}
.contact-block a.mail{
  display:inline-block;
  font-family:'Lora',serif; font-style:italic;
  font-size:clamp(16px,1.6vw,20px); line-height:30px; text-decoration:none;
  border-bottom:1px solid var(--plum); padding-bottom:4px;
}
.contact-block .addr{ color:var(--ink); font-size:15px; line-height:2; margin-top:var(--s4); }
.contact-block .social{ margin-top:var(--s4); display:flex; gap:var(--s4); font-size:14px; font-weight:600; }
.contact-block .social a{ display:inline-block; line-height:26px; text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; }
.contact-block .social a:hover{ border-color:var(--plum); color:var(--plum); }

/* ---------- HOVER-COLLAGE TILES (Case Studies grid + Home preview) ---------- */
.moments-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--s4);
}
@media (max-width:860px){ .moments-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .moments-grid{grid-template-columns:1fr;} }
.moment-tile{
  position:relative;
  aspect-ratio:4/5;
  border-radius:14px;
  overflow:hidden;
  display:block;
  text-decoration:none;
  color:var(--ink);
}
.moment-tile .cover,
.moment-tile .collage-4{
  position:absolute; inset:0;
  transition:opacity 0.35s ease;
}
.moment-tile .cover{
  background:var(--tile1);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--s3);
  opacity:1;
}
.moment-tile:nth-child(2) .cover{ background:var(--tile2); }
.moment-tile:nth-child(3) .cover{ background:var(--tile3); }
.moment-tile:nth-child(4) .cover{ background:var(--tile4); }
.moment-tile:nth-child(5) .cover{ background:var(--tile3); }
.moment-tile:nth-child(6) .cover{ background:var(--tile1); }
.moment-tile .collage-4{
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  gap:2px; opacity:0;
}
.moment-tile .collage-4 span{ background:var(--tile2); }
.moment-tile .collage-4 span:nth-child(1){ background:var(--tile1); }
.moment-tile .collage-4 span:nth-child(2){ background:var(--tile3); }
.moment-tile .collage-4 span:nth-child(3){ background:var(--tile4); }
.moment-tile .collage-4 span:nth-child(4){ background:var(--tile2); }
.moment-tile:hover .cover{ opacity:0; }
.moment-tile:hover .collage-4{ opacity:1; }
.moment-tile{ transition:box-shadow 0.3s ease; }
.moment-tile .cap{
  position:relative; z-index:2;
  font-size:12px; text-transform:uppercase; letter-spacing:0.08em; font-weight:700;
  color:var(--ink); opacity:0.65;
  padding:var(--s3);
  align-self:flex-end;
}
.moment-tile .cap span{display:block; font-weight:500; opacity:0.85; margin-top:4px; text-transform:none; letter-spacing:0; font-size:13px;}
.moment-tile:hover .cap{ opacity:0; transition:opacity 0.2s ease; }

.section-foot{ margin-top:var(--s6); }

/* ---------- SERVICES PAGE ---------- */
.service-row{
  padding:var(--s5) 0;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr 2fr; gap:var(--s5);
  transition:border-color 0.25s ease;
}
@media (max-width:760px){ .service-row{grid-template-columns:1fr; gap:var(--s2);} }
.service-row h3{
  font-family:'Lora',serif; font-weight:400; font-size:28px;
}
.service-row p{ color:var(--stone); font-size:15px; max-width:560px; }

/* ---------- ABOUT PAGE ---------- */
.about-lede p{
  font-family:'Lora',serif; font-weight:400;
  font-size:clamp(24px, 3.2vw, 36px); line-height:1.5; max-width:820px;
}

/* ---------- EVENT / CASE STUDY PAGE ---------- */
.event-desc{ margin-top:var(--s4); color:var(--stone); font-size:16px; max-width:560px; }
@media (max-width:600px){ .event-gallery{grid-template-columns:1fr;} }
/* once a real <img> or <video> is dropped in, it should fill the tile cleanly */
/* single full-width featured image, for case studies with one hero shot
   instead of the 4-tile grid — matches the collage's native 16:9 ratio
   so it displays with zero cropping */
/* ---------- INSTAGRAM FEED SECTION ---------- */
.journal-band{ background:#ffffff; }
.instagram-section .section-foot{ text-align:center; }

/* ---------- THE HERALDS EDIT (Spotify playlist) ---------- */
.playlist-band{ background:var(--lime); padding:var(--s5) 0; }
.playlist-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s7);
  align-items:center;
}
.playlist-head{ margin-bottom:0; }
.playlist-intro{ font-style:italic; }
.playlist-vol{
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:12.5px; text-transform:uppercase; letter-spacing:0.09em;
  color:var(--plum);
  margin-top:var(--s4);
}
.playlist-moods{
  font-family:'Montserrat',sans-serif; font-weight:300;
  font-size:15px; line-height:1.5;
  color:var(--stone);
  margin-top:4px;
}
.playlist-embed{
  background:var(--lime);
}
.playlist-embed iframe{ display:block; width:100%; border-radius:12px; }
@media (max-width:860px){
  .playlist-layout{ display:block; max-width:640px; }
  .playlist-embed{ margin-top:var(--s4); }
}
.insta-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2);
  max-width:640px;
}
@media (max-width:760px){ .insta-grid{grid-template-columns:repeat(3,1fr); max-width:none;} }
.insta-tile{
  aspect-ratio:1/1;
  border-radius:8px;
  overflow:hidden;
  display:block;
  position:relative;
  background:var(--tile1);
}
.insta-video-icon{
  position:absolute; top:10px; right:10px;
  width:18px; height:18px;
  color:#ffffff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5));
  pointer-events:none;
}
.insta-tile img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.45s ease, opacity 0.3s ease;
}
.insta-tile:hover img{ transform:scale(1.06); opacity:0.85; }

/* ---------- CLIENTS PAGE ---------- */
.client-category{ padding:var(--s6) 0; }
.client-category .cat-label{
  font-family:'Poppins',sans-serif;
  font-size:13px; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--plum); font-weight:700; margin-bottom:var(--s5);
}
.client-closing .sub{ color:var(--stone); margin-top:var(--s3); max-width:520px; font-size:16px; }
.client-closing .row{ margin-top:var(--s5); }
.client-list-large{ column-gap:var(--s7); row-gap:var(--s5); }
.client-list-large span{ font-size:clamp(24px, 3.4vw, 40px); }
@media (max-width:600px){
  .clientlist{ column-gap:var(--s4); row-gap:var(--s3); }
  .client-list-large{ column-gap:var(--s3); row-gap:var(--s3); }
  .client-list-large span{ font-size:20px; }
}

/* ---------- SCROLL REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 0.8s ease, transform 0.8s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- OUR ETHOS ---------- */
/* "WE ARE HERALDS" — serif display headline with a rule beneath, per mockup */
.ethos-title{
  font-family:'Lora',serif; font-weight:400;
  font-size:clamp(34px,5.2vw,64px);
  line-height:1.1; letter-spacing:0.01em;
  text-transform:uppercase;
  color:var(--plum);
  margin-top:0;
  padding-bottom:var(--s3);
  border-bottom:1.5px solid var(--plum);
  max-width:560px;
}

/* ---------- OUR ETHOS v2 (two-column, per reference) ---------- */
.ethos2-layout{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:0 var(--s7);
}
.ethos2-right{
  border-left:1.5px solid var(--plum);
  padding-left:var(--s6);
  position:relative;
  overflow:visible;
}
/* the belief statement — bold dark lead line, distinct from regular body copy */
.ethos2-belief{
  font-family:'Poppins',sans-serif; font-weight:600;
  font-size:clamp(19px,2.1vw,24px);
  line-height:1.4; letter-spacing:-0.005em;
  color:var(--ink);
  margin-top:var(--s4);
  max-width:480px;
}
.ethos2-block{
  border-left:2px solid var(--plum);
  padding-left:var(--s3);
  margin-top:var(--s5);
}
.ethos2-block-label{
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:13px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--plum);
}
.ethos2-block-text{
  font-family:'Montserrat',sans-serif; font-weight:300;
  font-size:15px; line-height:1.6;
  color:var(--stone);
  margin-top:6px; max-width:340px;
}

.ethos2-subhead{
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:clamp(20px,2.3vw,26px);
  text-transform:uppercase; letter-spacing:-0.005em;
  color:var(--plum);
  position:relative; z-index:2;
}
.ethos2-subhead-principles{ margin-top:40px; }
.ethos2-tagline{
  font-family:'Montserrat',sans-serif; font-weight:300; font-style:italic;
  font-size:13.5px; color:var(--plum);
  margin-top:6px;
  position:relative; z-index:2;
}
.ethos2-statement{
  font-family:'Montserrat',sans-serif; font-weight:400;
  font-size:15px; line-height:1.65;
  color:var(--plum);
  margin-top:var(--s3); max-width:380px;
  position:relative; z-index:2;
}
.ethos2-principle{ margin-top:19px; }
.ethos2-principle-label{
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:14.5px; text-transform:uppercase; letter-spacing:0.02em;
  color:var(--plum);
}
.ethos2-principle-text{
  font-family:'Montserrat',sans-serif; font-weight:300;
  font-size:15px; color:var(--stone);
  margin-top:3px;
}

/* the camellia bleeds off the top-right corner, sitting behind the People
   Always header and statement — sized and positioned by measuring the
   reference image directly (x:73-100%, y:0-46% of the full frame), not
   eyeballed, since this took several passes to get right last time */
.ethos2-bloom{
  position:absolute;
  z-index:1;
  top:-40px;
  right:-40px;
  width:225px;
  height:auto;
  opacity:0.92;
  pointer-events:none;
}
@media (max-width:860px){
  .ethos2-layout{ grid-template-columns:1fr; gap:var(--s6); }
  .ethos2-right{
    border-left:none;
    padding-left:0;
    border-top:1.5px solid var(--plum);
    padding-top:var(--s5);
  }
  .ethos2-bloom{
    top:158px;
    right:-15px;
    left:auto;
    width:165px;
    opacity:0.92;
  }
  /* extra clearance so the relocated flower doesn't crowd into either the
     statement above or Our Principles below */
  .ethos2-subhead-principles{ margin-top:91px; }
  .ethos2-belief{ max-width:none; }
  .ethos2-block-text{ max-width:none; }
  .ethos2-statement{ max-width:none; }
}

/* ---------- OUR CRAFT ---------- */
.craft-intro{ color:var(--stone); margin-top:var(--s4); max-width:640px; }
.tag-lead{
  font-family:'Poppins',sans-serif; font-size:12px;
  text-transform:uppercase; letter-spacing:0.09em;
  font-weight:600; color:var(--stone);
  margin-top:var(--s5); margin-bottom:var(--s3);
  display:flex; align-items:center; gap:9px;
}
.tag-lead::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--ruby); flex:none;
}
.tag-row{
  display:flex; flex-wrap:wrap; gap:var(--s2);
}
.tag-row span{
  font-family:'Poppins',sans-serif; font-size:11.5px; text-transform:uppercase;
  letter-spacing:0.06em; font-weight:600; color:var(--plum);
  border:1px solid var(--plum); border-radius:100px; padding:8px 16px;
}
.craft-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:var(--s4);
  margin-top:var(--s6);
  padding-top:var(--s6);
  border-top:1px solid var(--line);
}
@media (max-width:820px){ .craft-grid{ grid-template-columns:1fr; } }

.craft-card{
  position:relative;
  display:block;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:var(--s5);
  overflow:hidden;
  text-decoration:none;
  cursor:pointer;
  transition:transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
/* cards without a linked case study yet aren't clickable — don't imply
   otherwise with the pointer cursor */
div.craft-card{ cursor:default; }
/* lime bar wipes across the top edge on hover */
.craft-card::before{
  content:'';
  position:absolute; inset:0;
  background:var(--lime);
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index:0;
}
/* keep the copy above the fill */
.craft-card > *{ position:relative; z-index:1; }

/* small link cue, hidden until the card is highlighted */

/* touch devices can't hover at all, so the cue above would never appear —
   show it permanently there instead of relying on a hover that won't happen */
@media (hover: none){

}

.craft-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 40px rgba(36,19,41,0.09);
  border-color:var(--lime);
}
.craft-card:hover::before{ transform:scaleX(1); }
.craft-card:hover h3,
.craft-card:hover .card-lead{ color:var(--plum); }
.craft-card:hover p{ color:#3D1049; }
.craft-card:hover h3::after{ background:var(--plum); }

.craft-card h3{
  font-family:'Lora',serif; font-weight:500;
  text-transform:uppercase; letter-spacing:0.02em;
  font-size:clamp(18px, 1.9vw, 23px);
  color:var(--plum);
}
/* short lime rule under the title that extends on hover */
.craft-card h3::after{
  content:''; display:block;
  width:32px; height:2px; background:var(--ruby);
  margin-top:var(--s3);
  transition:width 0.45s ease;
}
.craft-card:hover h3::after{ width:66px; }

.craft-card p{
  color:var(--stone); font-size:15px; line-height:1.75;
  margin-top:var(--s3);
}
@media (max-width:520px){
  .craft-card{ padding:var(--s4); }
}

/* ---------- IN SYNERGY ---------- */
.synergy-band{
  position:relative;
  /* taller than a default section so the 100px edge fades stay a small
     share of what's on screen when the section fills the viewport */
  padding:calc(var(--s8) * 1.44) 0;
  min-height:100vh;
  display:flex;
  align-items:center;
  background:url('synergy-bg-marble.jpg') center/cover no-repeat;
}
/* soft wash so the copy holds against the busier parts of the stone */
/* flat wash so the copy holds against the busier parts of the stone */
.synergy-band::before{
  content:'';
  position:absolute; inset:0;
  background:rgba(255,255,255,0.42);
  pointer-events:none;
}
/* top fade only now — Synergy sits between The Journal (white) above and
   In Conversation (plum) below. The plum is a deliberate solid color block,
   not something to blend into, so only the top edge needs softening. */
.synergy-band::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0) 100px);
}
.synergy-band > .wrap{ position:relative; z-index:1; width:100%; }
.synergy-title{
  font-family:'Lora',serif; font-weight:400;
  /* matches Our Craft / The Work / In Conversation — WE ARE HERALDS is the
     one deliberately larger header, everything else shares this size */
  font-size:clamp(24px,2.9vw,36px);
  letter-spacing:0.01em; text-transform:uppercase;
  color:var(--plum);
  margin-bottom:var(--s6);
}
.synergy-layout{
  display:grid; grid-template-columns:1fr 1px 1fr;
  gap:var(--s6);
  align-items:start;
}
/* the vertical rule between the two columns, as in the mockup */
.synergy-layout::before{
  content:'';
  grid-column:2; grid-row:1;
  width:1px; height:100%;
  background:rgba(86,18,105,0.35);
}
.synergy-col:nth-of-type(1){ grid-column:1; }
.synergy-col:nth-of-type(2){ grid-column:3; }
.synergy-label{
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:15.5px; text-transform:uppercase; letter-spacing:0.09em;
  color:var(--plum);
}
.synergy-lead{
  font-family:'Montserrat',sans-serif; font-weight:400;
  font-size:16px; line-height:1.7; color:var(--ink);
  margin-top:var(--s2);
}
.synergy-mark{
  margin:var(--s5) 0 var(--s4);
  min-height:60px;
  display:flex; align-items:center;
}
.synergy-mark img{ max-width:min(320px, 78%); height:auto; display:block; }
.synergy-kicker{
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:13px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--plum);
  margin-top:var(--s3);
}
.synergy-body{
  font-family:'Montserrat',sans-serif; font-weight:300;
  font-size:15px; line-height:1.75; color:var(--stone);
  margin-top:var(--s2);
}
@media (max-width:860px){
  .synergy-layout{ grid-template-columns:1fr; gap:var(--s6); }
  .synergy-layout::before{ display:none; }
  .synergy-col:nth-of-type(1),
  .synergy-col:nth-of-type(2){ grid-column:1; }
  .synergy-col + .synergy-col{
    border-top:1px solid rgba(86,18,105,0.25);
    padding-top:var(--s5);
  }
}



/* hero secondary supporting line */
.sub-secondary{ margin-top:var(--s3); opacity:0.72; }

/* short stacked emphasis lines (Ethos + Reach closing beats) */

/* discipline card lead line */
.card-lead{
  font-family:'Poppins',sans-serif; font-weight:700; font-style:normal;
  text-transform:uppercase; letter-spacing:0.05em;
  font-size:13px; color:var(--ink);
  margin-top:var(--s2) !important;
}
.craft-card .card-lead + p{
  margin-top:var(--s2);
  font-family:'Montserrat',sans-serif; font-weight:300;
}

/* ---------- CONTACT FORM: SELECT FIELD ---------- */
.contact-form select{
  width:100%;
  font-family:'Inter',sans-serif;
  font-size:15px;
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  padding:var(--s2) 0;
  outline:none;
  transition:border-color 0.2s ease;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238A8290'%3E%3Cpath d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right center;
  background-size:16px;
}
.contact-form select:focus{ border-color:var(--lime); }

/* ---------- FOOTER TOP ---------- */
.footer-top{ text-align:center; margin-bottom:var(--s5); }
.footer-brand{
  height:26px; width:auto;
  display:inline-block;
}
.footer-tagline{ font-size:14px; color:var(--stone); margin-top:var(--s2); }
.footer-loc{
  font-family:'Poppins',sans-serif; font-size:11.5px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--stone); margin-top:var(--s2);
}

/* ---------- GATED INTRO ---------- */
html.intro-lock, html.intro-lock body{ overflow:hidden !important; height:100%; }

.intro-overlay{
  position:fixed; inset:0; z-index:9999;
  /* explicit height as a fallback for browsers without dvh support */
  height:100vh;
  /* dvh tracks the REAL current viewport as iOS Safari's address bar
     expands/collapses — inset:0 alone doesn't reliably repaint through that
     settling moment, which is what "full-screen then shrinks" looks like */
  height:100dvh;
  background:var(--plum);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding-bottom:9vh;
  transition:opacity 0.65s ease;
  overflow:hidden;
}
.intro-overlay.intro-exit{ opacity:0; pointer-events:none; }

.intro-video{
  position:absolute; top:0; left:0; right:0; bottom:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.intro-arrow{
  position:absolute; bottom:var(--s5); z-index:1;
  color:var(--plum);
  opacity:0;
  animation:introArrowFade 0.6s ease forwards 1.1s, introBounce 1.8s ease-in-out infinite 1.7s;
}

@keyframes introBounce{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(8px); }
}
@keyframes introArrowFade{
  from{ opacity:0; }
  to{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .intro-overlay{ display:none !important; }
}

/* ---------- TOP-TO-BOTTOM STAGGER CASCADE (post-intro reveal) ---------- */
.stagger-in{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 0.65s ease, transform 0.65s ease;
}
.stagger-in.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---------- PURPOSE WORD PULSE ---------- */
#purposeWord{ display:inline-block; }
#purposeWord.pulse-active{
  animation:purposeGrow 0.85s ease-out;
}
@keyframes purposeGrow{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.16); }
  100%{ transform:scale(1); }
}

/* ---------- OUR REACH — CLAY CORE + SIGNAL WAVES ---------- */
@media (max-width:900px){
}
/* once a real logo file is dropped in */


/* =========================================================
   MOBILE REFINEMENTS — scoped to small screens only.
   Nothing here affects the desktop layout.
   ========================================================= */

/* ---- OUR CRAFT: two-up on larger phones/tablets so six cards
        aren't one endless column ---- */
@media (min-width:560px) and (max-width:820px){
  .craft-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:820px){
  /* tighter cards = far less scrolling through the six disciplines */
  .craft-grid{ gap:var(--s3); padding-top:var(--s5); margin-top:var(--s5); }
  .craft-card{ padding:26px 24px; border-radius:12px; }
  .craft-card h3{ font-size:19px; }
  .craft-card .card-lead{ font-size:14.5px; margin-top:10px !important; }
  .craft-card p{ font-size:14.5px; line-height:1.62; margin-top:10px; }
  .craft-card h3::after{ margin-top:14px; }

  /* ---- OUR ETHOS: mobile layout handled in the ethos2-* rules above ---- */
  .approach-head h2::after{ margin-top:var(--s2); }

  /* ---- OUR REACH: graphic becomes a small side accent rather than a
          full-width block dumped under the paragraph ---- */
  .reach-body{ margin-top:var(--s4); }
  .reach-partner-logo{
    max-width:170px;
    justify-self:end;
    margin-top:calc(var(--s4) * -1);
    margin-right:calc(var(--s1) * -1);
  }
}

/* ---------- WHITE-BAND VIDEO BACKGROUND (Our Ethos / Our Craft / Our Reach) ---------- */
.white-video-band{
  position:relative;
  overflow:hidden;
}
.section-bg-video{
  position:absolute; top:0; left:0; right:0; bottom:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.section-bg-scrim{
  position:absolute; top:0; left:0; right:0; bottom:0;
  background:rgba(253,251,248,0.6);
  z-index:1;
}
/* the three sections and everything inside them sit above the video/scrim */
.white-video-band > section{ position:relative; z-index:2; }

@media (prefers-reduced-motion: reduce){
  .section-bg-video{ display:none; }
  /* fall back to the poster frame as a plain still background */
  .white-video-band{ background:url('section-bg-poster.jpg') center center / cover no-repeat; }
}
@media (prefers-reduced-motion: reduce) and (max-width:700px){
  .white-video-band{ background-image:url('section-bg-poster-mobile.jpg'); }
}

/* ---------- IN CONVERSATION — plum band with lime type ---------- */
.conversation-band{
  background:var(--plum);
  padding:var(--s8) 0;
}
.conversation-band .kicker{ color:var(--lime); }
.conversation-band .kicker::before{ background:var(--lime); }
/* ruby dots fail contrast on plum (~2:1) — lime is the band's accent */
.conversation-band .label::before{ background:var(--lime); }
.conversation-band .approach-head{
  /* same header size as Our Craft/The Work, but this sentence is longer —
     widen the container here instead of shrinking the text */
  max-width:700px;
}
.conversation-band .approach-head h2{ color:var(--lime); }
.conversation-band .approach-head h2::after{ background:var(--lime); }
.conversation-band .craft-intro{ color:rgba(255,255,255,0.78); }

.conversation-band .contact-form label,
.conversation-band .contact-block .label{ color:var(--lime); }
.conversation-band .contact-form input,
.conversation-band .contact-form select,
.conversation-band .contact-form textarea{
  color:#ffffff;
  border-bottom-color:rgba(211,255,153,0.45);
  background:transparent;
}
.conversation-band .contact-form input:focus,
.conversation-band .contact-form select:focus,
.conversation-band .contact-form textarea:focus{
  border-bottom-color:var(--lime);
}
.conversation-band .contact-form select option{ color:var(--ink); background:#ffffff; }
.conversation-band .contact-block a.mail{
  color:var(--lime); border-bottom-color:var(--lime);
}
.conversation-band .contact-block .addr{ color:rgba(255,255,255,0.82); }
.conversation-band .contact-block .social a{
  color:rgba(255,255,255,0.9); border-bottom-color:rgba(211,255,153,0.4);
}
.conversation-band .contact-block .social a:hover{ color:var(--lime); border-color:var(--lime); }
.conversation-band .contact-block{ border-top-color:rgba(211,255,153,0.3); }
.conversation-band .btn{
  background:var(--lime); color:var(--plum); border-color:var(--lime);
}
.conversation-band .btn:hover{
  background:#ffffff; color:var(--plum); border-color:#ffffff;
}

/* ---------- MOBILE TOUCH REFINEMENTS ---------- */
@media (max-width:820px){
  /* social links were 29px tall — pad them out toward the 44px guideline
     without changing how they look */
  .contact-block .social{
    flex-wrap:wrap;
    gap:var(--s2) var(--s4);
  }
  .contact-block .social a{
    line-height:44px;
    padding-bottom:0;
  }
  .contact-block a.mail{
    line-height:44px;
    padding-bottom:0;
  }
  /* stop iOS zooming the page when a field is focused: any input under
     16px triggers an automatic zoom on focus */
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form select,
  .contact-form textarea{
    font-size:16px;
  }
  /* prevent long words/URLs from forcing horizontal scroll */
  .ethos2-belief, .ethos2-block-text, .ethos2-statement, .synergy-body, .synergy-lead, .craft-card p, .sub{
    overflow-wrap:break-word;
  }
  /* the synergy section's tall desktop padding exists to keep the edge
     fades a small share of the section; stacked on mobile it's already
     tall enough, so that padding is just dead scroll */
  .synergy-band{
    padding:var(--s7) 0;
    min-height:0;
  }
  .conversation-band{ padding:var(--s7) 0; }
  .journal-band{ padding-top:var(--s6); padding-bottom:var(--s6); }
}

/* ---------- JOURNAL: headless section ---------- */
/* the revision file showed this section with no headline, so the ruby rule
   that normally hangs off the h2 is attached to the kicker instead, keeping
   the section's visual anchor consistent with the others */
.journal-band .approach-head .kicker{ margin-bottom:var(--s3); }
.journal-band .approach-head .craft-intro{ margin-top:0; }
.journal-band .approach-head .craft-intro::after{
  content:''; display:block;
  width:56px; height:3px; background:var(--ruby);
  margin-top:var(--s4);
}


/* ---------- FORM SUBMISSION POPUP ---------- */
.form-modal{
  position:fixed; inset:0; z-index:9998;
  display:flex; align-items:center; justify-content:center;
  padding:var(--s4);
  background:rgba(61,16,73,0.55);
  opacity:0; visibility:hidden;
  transition:opacity 0.25s ease;
}
.form-modal.is-open{ opacity:1; visibility:visible; }
.form-modal-card{
  position:relative;
  width:100%; max-width:360px;
  background:var(--plum);
  border-radius:18px;
  padding:var(--s6) var(--s5);
  text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,0.3);
  transform:translateY(12px) scale(0.97);
  transition:transform 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
.form-modal.is-open .form-modal-card{ transform:translateY(0) scale(1); }
.form-modal-card h3{
  font-family:'Lora',serif; font-weight:400;
  font-size:28px; color:#ffffff;
  text-transform:uppercase; letter-spacing:0.01em;
}
.form-modal-card p{
  font-family:'Montserrat',sans-serif; font-weight:300;
  font-size:15px; color:rgba(255,255,255,0.8);
  margin-top:var(--s2);
}
.form-modal-close{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.3);
  background:transparent;
  color:#ffffff; font-size:20px; line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.form-modal-close:hover{ background:rgba(255,255,255,0.12); }
@media (prefers-reduced-motion: reduce){
  .form-modal, .form-modal-card{ transition:none; }
}