@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&family=Source+Sans+3:wght@400;500;600;700;900&display=swap');

:root{
  --paper:#f4f4f4;
  --ink:#111;
  --black:#0b0b0b;
  --dark:#222;
  --blue:#0A67FF;
  --mid-blue-a:#0b63c9;
  --mid-blue-b:#084890;
  --grid:#dbe4e8;
  --hand:#0b55c8;
  --unit:200px;
  --frame:1200px;
  --top:100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Source Sans 3","Source Sans Pro",Arial,sans-serif;
  font-weight:400;
  letter-spacing:.025em;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
button,input,textarea{font:inherit}

/* 1200px reference canvas.
   At 1400px viewport this gives 100 / 1200 / 100 exactly.
   At smaller widths the frame shrinks, but JS recalculates --unit
   so all six visible cells remain true squares. */
.construction-frame{
  position:relative;
  width:min(1200px, calc(100vw - 20px));
  margin:var(--top) auto 0;
  min-height:calc(var(--unit) * 16);
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size:var(--unit) var(--unit);
  background-position:0 0;
}
.grid6{
  display:grid;
  grid-template-columns:repeat(6, var(--unit));
  grid-auto-rows:var(--unit);
  gap:0;
}
.grid-item{position:relative;min-width:0;min-height:0}
.eyebrow{
  color:var(--blue);
  font-size:clamp(18px,1.55vw,24px);
  line-height:1;
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  margin-bottom:22px;
}
.hero-title{
  font-size:clamp(34px,3.25vw,52px);
  line-height:1.08;
  font-weight:600;
  letter-spacing:.012em;
}
.hero-copy{
  font-size:clamp(16px,1.25vw,20px);
  line-height:1.55;
  font-weight:400;
  max-width:33ch;
}
.dark-surface{
  color:#f4f4f4;
  background:linear-gradient(135deg,#151515 0%,#2b2b2b 48%,#555 100%);
}
.pale-surface{
  background:linear-gradient(135deg,rgba(30,30,30,.03),rgba(30,30,30,.10));
}
.shape-content{
  position:absolute;
  inset:clamp(28px,3.1vw,48px);
  overflow:hidden;
}
.shape-square{width:100%;height:100%;overflow:hidden}
.shape-d-right{
  width:100%;height:100%;overflow:hidden;
  border-radius:0 50% 50% 0;
}
.shape-quarter-tl{
  width:100%;height:100%;overflow:hidden;
  border-radius:100% 0 0 0;
}
.shape-quarter-tr{
  width:100%;height:100%;overflow:hidden;
  border-radius:0 100% 0 0;
}
.shape-quarter-bl{
  width:100%;height:100%;overflow:hidden;
  border-radius:0 0 0 100%;
}
.shape-quarter-br{
  width:100%;height:100%;overflow:hidden;
  border-radius:0 0 100% 0;
}
.shape-circle{width:100%;height:100%;border-radius:50%;overflow:hidden}
.placeholder{
  background:linear-gradient(135deg,#cfcfcf,#ececec,#aaa);
}
.small-label{
  font-size:14px;
  line-height:1.2;
  letter-spacing:.02em;
}
.project-title{
  font-size:17px;
  line-height:1.4;
  font-weight:600;
}
.project-link{
  font-size:13px;
  font-style:italic;
}
.page-shell{padding-bottom:calc(var(--unit) * 3)}

/* mini-D: one grid unit, fixed in the position shown in mockups */
.mini-d{
  position:fixed;
  z-index:100;
  top:var(--top);
  left:calc(50% + (var(--unit) * 2));
  width:var(--unit);
  height:var(--unit);
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
}
.mini-d a{
  display:block;
  background:linear-gradient(45deg,#080808 0%,#2d2d2d 100%);
  transition:background .2s ease, filter .2s ease;
}
.mini-d a:hover{
  background:linear-gradient(45deg,var(--mid-blue-a),var(--mid-blue-b));
}
.mini-d .work{border-radius:3px 0 0 0}
.mini-d .approach{border-radius:0 100% 0 0}
.mini-d .about{border-radius:0 0 0 3px}
.mini-d .contact{border-radius:0 0 100% 0}
.mini-d a:not(.active){
  background:linear-gradient(45deg,#080808 0%,#2d2d2d 100%) !important;
}
.mini-d a:not(.active):hover{
  background:linear-gradient(45deg,var(--mid-blue-a),var(--mid-blue-b)) !important;
}
.mini-d a.active{background:var(--blue) !important}
.mini-d{filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}

/* depth/motion primitives */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s cubic-bezier(.22,.75,.25,1), transform .65s cubic-bezier(.22,.75,.25,1);
}
.reveal.is-visible{opacity:1;transform:none}
.lift{
  transition:transform .24s cubic-bezier(.22,.75,.25,1), filter .24s cubic-bezier(.22,.75,.25,1);
}
.lift:hover{
  transform:translateY(-4px);
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.14));
}
.hand-note{
  font-family:"Homemade Apple",cursive;
  color:var(--hand);
  font-size:clamp(22px,2vw,34px);
  line-height:1.45;
  transform:rotate(-6deg);
}

/* WORK */
.work-hero{
  grid-column:1 / span 4;
  grid-row:1 / span 4;
}
.work-hero .shape-content{right:20%}
.work-project-image{height:100%}
.work-card-text{
  padding:18px 20px 16px 20px;
  align-self:stretch;
  background:rgba(244,244,244,.96);
  overflow:hidden;
}

/* APPROACH */
.approach-hero{
  grid-column:1 / span 5;
  grid-row:1 / span 5;
}
.approach-hero .shape-content{
  right:31%;
  bottom:22%;
}
.approach-ghost{
  grid-column:1 / span 4;
  grid-row:7 / span 4;
  opacity:.55;
}
.approach-shape-2{
  grid-column:4 / span 3;
  grid-row:12 / span 3;
}
.approach-shape-3{
  grid-column:1 / span 2;
  grid-row:15 / span 2;
}

/* ABOUT */
.about-hero{
  grid-column:1 / span 4;
  grid-row:1 / span 4;
}
.about-hero .shape-content{
  right:28%;
  bottom:16%;
}
.about-ghost{
  grid-column:1 / span 6;
  grid-row:4 / span 6;
  opacity:.34;
}
.about-small{
  grid-column:1 / span 2;
  grid-row:9 / span 2;
}
.about-links{
  grid-column:1 / span 6;
  grid-row:16 / span 2;
  display:grid;
  grid-template-columns:repeat(3, var(--unit));
  justify-content:start;
}
.about-links a{width:calc(var(--unit) * 2);height:calc(var(--unit) * 2)}

/* CONTACT */
.contact-heading{
  grid-column:1 / span 5;
  grid-row:1 / span 2;
  padding:35px 32px;
}
.contact-form-shape{grid-column:1 / span 5;grid-row:3 / span 5;}
.contact-form-inner{position:absolute;inset:11% 13% 11% 7%;}
.contact-form{
  display:grid;
  gap:26px;
}
.contact-form label{
  display:block;
  color:#f4f4f4;
  font-size:15px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.d-field{
  width:100%;
  height:52px;
  border:0;
  outline:none;
  margin-top:10px;
  padding:0 24px;
  color:#222;
  background:#f4f4f4;
  border-radius:0 999px 999px 0;
}
.d-field.long{max-width:470px}
.d-field.med{max-width:410px}
.d-field.short{max-width:255px}
.d-send{
  width:140px;
  height:52px;
  border:0;
  color:#111;
  background:var(--blue);
  border-radius:0 999px 999px 0;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.contact-goodies{
  grid-column:1 / span 6;
  grid-row:10 / span 2;
  display:grid;
  grid-template-columns:repeat(3,2fr);
}
.contact-goodies > div{
  min-height:calc(var(--unit) * 2);
}

/* case-study structural classes prepared for next phase */
.case-main-d{
  width:calc(var(--unit) * 4);
  height:calc(var(--unit) * 4);
  border-radius:0 50% 50% 0;
  overflow:hidden;
}
.case-main-d img,
.case-square img{width:100%;height:100%;object-fit:cover;display:block}
.case-square{aspect-ratio:1;overflow:hidden}
.case-square.s400{width:400px}
.case-square.s600{width:600px}
.case-square.s900{width:900px}

/* mobile: same six-column guide, 10px margins; --unit is recalculated by JS */
@media(max-width:700px){
  :root{--top:10px}
  .construction-frame{
    width:calc(100vw - 20px);
    margin-top:10px;
  }
  .mini-d{
    top:10px;
    left:calc(50% + (var(--unit) * 2));
  }
  .eyebrow{font-size:15px}
  .hero-title{font-size:clamp(28px,8vw,38px)}
  .hero-copy{font-size:14px}
  .shape-content{inset:18px}
}


/* Contact form alignment refinement */
.contact-form{
  display:grid;
  gap:26px;
}
.contact-row{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  justify-items:start;
}
.contact-row label{
  display:block;
  margin:0;
  color:#f4f4f4;
  font-size:15px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.contact-row .d-field{
  display:block;
  margin:0;
  margin-left:0;
}
.contact-row .d-field.long,
.contact-row .d-field.med,
.contact-row .d-field.short{
  width:min(100%,470px);
  max-width:470px;
}
.contact-row.email .d-field{
  width:min(100%,320px);
  max-width:320px;
}
.contact-form .d-send{
  margin-top:4px;
  justify-self:start;
}


/* Restored homepage scale/layout */
.home-shell{position:relative;width:min(94vw,1400px);height:100vh;margin:0 auto}
.home-headline{position:absolute;left:calc(var(--dSize)*.25);top:8vh;width:calc(var(--dSize)*.97);line-height:.97;font-weight:700;letter-spacing:.008em;white-space:nowrap;transform-origin:left top}
.home-wrap{position:absolute;left:calc(var(--dSize)*.25);top:21vh;width:var(--dSize);aspect-ratio:1}
#navSvg{width:100%;height:100%;display:block;overflow:visible}
.home-label{position:absolute;z-index:10;color:#f7f7f7;font-size:clamp(18px,2.15vw,32px);line-height:1;font-weight:400;letter-spacing:.05em;white-space:nowrap;pointer-events:none;transition:opacity .16s ease}
.home-note{position:absolute;left:calc(100% + 6px);top:5%;width:250px;opacity:0;transition:opacity .35s ease;pointer-events:none;color:#222;font-family:"Homemade Apple",cursive;font-size:34px;line-height:1.42;letter-spacing:.003em;transform:rotate(-5deg)}
.home-note.show{opacity:.92}
.home-hover{position:absolute;z-index:11;left:0;top:0;color:#083a8f;font-family:"Homemade Apple",cursive;font-size:45px;line-height:1.41;text-align:center;transform:translate(-50%,-50%) rotate(-10deg);opacity:0;pointer-events:none;transition:opacity .22s ease;white-space:nowrap}
.home-hover.show{opacity:.88}


@media(max-width:900px){
  .mini-wrap{width:72px;top:16px;right:16px}.mini-nav{width:72px;height:72px}
  .bau-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:calc(100cqw / 2)}
  .c3{grid-column:span 2}
  .work-square,.about-square{width:100%;aspect-ratio:auto;grid-template-columns:1fr}
  .work-square .mark{min-height:280px}.about-square .portrait{min-height:420px}
  .approach-stage,.contact-stage{width:92vw}
  .approach-disk .hero-copy{right:30%;top:22%}
  .approach-hole-note{right:0;width:33%;font-size:clamp(1rem,3vw,1.7rem)}
  .contact-copy{right:34%;bottom:20%}
  .case-hero{grid-template-columns:1fr}.case-hero .case-image{min-height:50vh}
  .fact-strip,.diagnostic{grid-template-columns:1fr}
  :root{--dSize:min(82vw,620px)}
  .home-headline{left:8vw;top:5.5vh;width:84vw;white-space:normal;font-size:clamp(30px,8vw,48px)!important;transform:none!important}
  .home-wrap{left:8vw;top:18vh}.home-note,.home-hover{display:none}
}

.home-body{
  overflow:hidden;
  background:var(--paper);
}

/* Mini-D cleanup: identical inactive treatment on every non-selected segment */
.mini-d a{
  background-image:linear-gradient(45deg,#050505 0%,#242424 100%) !important;
  background-color:transparent !important;
  background-size:100% 100% !important;
  background-position:center !important;
  filter:none !important;
}
.mini-d a:not(.active):hover{
  background-image:linear-gradient(45deg,var(--mid-blue-a) 0%,var(--mid-blue-b) 100%) !important;
}
.mini-d a.active{
  background-image:none !important;
  background-color:var(--blue) !important;
}

/* Contact fields — explicit grid widths and fixed four-line depth */
.contact-form{
  display:grid;
  gap:36px;
}
.contact-row{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  justify-items:start;
  width:100%;
}
.contact-row label{
  display:block;
  margin:0;
}

/* Reference desktop widths: 4 / 3 / 2 of the 200px grid units */
.contact-field-4{width:800px}
.contact-field-3{width:600px}
.contact-field-2{width:400px}
.contact-field-4,.contact-field-3,.contact-field-2{max-width:100%}

.d-textarea,.d-email{
  display:block;
  border:0;
  outline:none;
  color:#222;
  background:#f4f4f4;
  font:inherit;
  box-sizing:border-box;
}

/* Four visible lines, with a mathematically semicircular right end */
.d-textarea{
  height:112px;
  line-height:1.35;
  padding:13px 66px 13px 22px;
  resize:none;
  overflow:hidden;
  border-radius:0 56px 56px 0;
}
.d-email{
  height:52px;
  line-height:52px;
  padding:0 42px 0 22px;
  border-radius:0 26px 26px 0;
}
.d-textarea::placeholder,.d-email::placeholder{color:#777}

/* Keep each question visually attached to its own reply field. */
.contact-row + .contact-row{margin-top:2px}
.contact-row.email{margin-top:2px}

@media(max-width:900px){
  .contact-field-4,.contact-field-3,.contact-field-2{width:100%}
  .d-textarea{height:104px;border-radius:0 52px 52px 0}
}


/* v10 mini-D: one shared dark gradient across the complete D */
.mini-d{
  overflow:visible;
  background:linear-gradient(45deg,#050505 0%,#2b2b2b 100%);
  border-radius:0 50% 50% 0;
}
.mini-d a{
  background:none !important;
  background-image:none !important;
  filter:none !important;
}
.mini-d a:not(.active):hover{
  background:linear-gradient(45deg,var(--mid-blue-a) 0%,var(--mid-blue-b) 100%) !important;
}
.mini-d a.active{background:var(--blue) !important}

/* v10 content blocks */
.content-section{position:relative;padding:36px 34px 38px}
.content-section h2{font-size:clamp(26px,2.3vw,38px);line-height:1.08;font-weight:600;margin-bottom:18px}
.content-section p{font-size:17px;line-height:1.55;max-width:42ch;margin-bottom:16px}
.content-section .rule{width:44px;height:2px;background:var(--blue);margin:0 0 20px}
.muted{color:rgba(17,17,17,.58)}
.work-intro{grid-column:1 / span 3;grid-row:5 / span 1;padding:28px 0 0}
.work-intro p{max-width:44ch;font-size:17px;line-height:1.5}
.project-card{background:rgba(244,244,244,.97);overflow:hidden}
.project-card .copy{padding:18px 20px 22px}
.project-card .copy p{margin:9px 0 0;font-size:15px;line-height:1.45}
.project-card .copy .project-link{display:inline-block;margin-top:13px}
.secondary-work{padding:24px 20px;background:rgba(244,244,244,.98)}
.secondary-work strong{display:block;font-size:17px;margin-bottom:7px}
.secondary-work p{font-size:14px;line-height:1.45;margin-bottom:10px}

.approach-copy-a{grid-column:1 / span 3;grid-row:11 / span 3}
.approach-copy-b{grid-column:4 / span 3;grid-row:15 / span 3}
.approach-copy-c{grid-column:1 / span 3;grid-row:19 / span 3}
.reverse-diagram{grid-column:4 / span 3;grid-row:19 / span 4;padding:32px}
.reverse-diagram .step{padding:14px 18px;margin:0 0 10px;background:rgba(244,244,244,.92);font-size:16px;line-height:1.25}
.reverse-diagram .step:first-child{background:var(--ink);color:var(--paper)}
.reverse-diagram .arrow{margin:4px 0 8px 8px;font-size:22px;color:var(--blue)}

.about-copy-a{grid-column:4 / span 3;grid-row:9 / span 3}
.about-copy-b{grid-column:1 / span 3;grid-row:12 / span 3}
.about-quote{grid-column:4 / span 3;grid-row:13 / span 3;padding:34px;display:flex;align-items:flex-end}
.about-quote p{font-size:clamp(27px,2.4vw,40px);line-height:1.08;max-width:18ch;margin:0;font-weight:600}
.about-links{align-items:start}
.about-links a{position:relative;display:flex;align-items:center;justify-content:center}
.about-links a span{width:65%;text-align:center;font-size:15px;line-height:1.25;font-weight:600}

.contact-note{grid-column:1 / span 4;grid-row:9 / span 1;padding-top:28px}
.contact-note p{max-width:48ch;font-size:16px;line-height:1.5}
.contact-goodies .article-card{padding:26px 24px;background:rgba(244,244,244,.98)}
.contact-goodies .article-card small{display:block;text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px;font-weight:600}
.contact-goodies .article-card strong{display:block;font-size:20px;line-height:1.2;margin-bottom:12px}
.contact-goodies .article-card span{font-size:14px;font-style:italic}


/* =========================================================
   v11 hero vertical rhythm
   Approach is the reference. Work and About follow it.
   ========================================================= */
.approach-hero .shape-content,
.work-hero .shape-content,
.about-hero .shape-content{
  top:90px !important;
}

/* Keep existing left/right/bottom safe areas, only lower the content start. */


/* =========================================================
   v11 mini-D — deliberately simple independent quadrants
   ========================================================= */
.mini-d{
  background:none !important;
  border-radius:0 !important;
  filter:none !important;
  box-shadow:none !important;
  overflow:visible;
}
.mini-d a{
  display:block;
  filter:none !important;
  box-shadow:none !important;
  transform:none !important;
  transition:background .18s ease !important;
  background:linear-gradient(45deg,#050505 0%,#242424 100%) !important;
}
.mini-d a:hover,
.mini-d a:not(.active):hover{
  background:linear-gradient(45deg,#0a4f9e 0%,#082f66 100%) !important;
}
.mini-d a.active{
  background:#0A67FF !important;
}

/* exact segment geometry */
.mini-d .work{border-radius:0 !important}
.mini-d .approach{border-radius:0 100% 0 0 !important}
.mini-d .about{border-radius:0 !important}
.mini-d .contact{border-radius:0 0 100% 0 !important}


/* =========================================================
   v12 content pass and image system
   ========================================================= */
:root{
  --mini-dark-start:#050505;
  --mini-dark-end:#343434;
}

/* General tightening */
.hero-title{line-height:1.02;letter-spacing:-.01em}
.hero-copy,.content-section p,.work-intro p,.project-card .copy p,.secondary-work p,.contact-note p{line-height:1.42}
.content-section{padding:28px 26px 30px}
.project-card .copy{padding:14px 15px 16px}
.project-title{font-size:18px;line-height:1.24;margin-bottom:6px}
.small-label{font-size:13px;letter-spacing:.04em;text-transform:none;opacity:.9}
.project-link{display:inline-block;margin-top:10px}
.rule{width:40px;height:2px;background:var(--blue);margin-bottom:16px}

/* Lower and tighten hero content for Work / About / Approach */
.approach-hero .shape-content,
.work-hero .shape-content,
.about-hero .shape-content{top:112px !important;left:42px !important;right:26% !important}
.work-hero .shape-content{right:18% !important}
.about-hero .shape-content{right:28% !important}
.approach-hero .shape-content{right:30% !important;bottom:18% !important}
.eyebrow{margin-bottom:18px}

/* Mini-D final simplification */
.mini-d{background:none !important;border-radius:0 !important;filter:none !important;box-shadow:none !important;overflow:visible}
.mini-d a{display:block;background:linear-gradient(45deg,var(--mini-dark-start) 0%,var(--mini-dark-end) 100%) !important;transition:background .18s ease !important}
.mini-d a.work,.mini-d a.about,.mini-d a.contact{background:linear-gradient(45deg,var(--mini-dark-start) 0%,var(--mini-dark-end) 100%) !important}
.mini-d a.approach:not(.active):not(:hover){background:linear-gradient(45deg,var(--mini-dark-start) 0%, var(--mini-dark-start) 18%, var(--mini-dark-end) 80%, var(--mini-dark-end) 100%) !important}
.mini-d a:hover,.mini-d a:not(.active):hover{background:linear-gradient(45deg,#0b63c9 0%,#083a8f 100%) !important}
.mini-d a.active{background:var(--blue) !important}
.mini-d .work{border-radius:0 !important}
.mini-d .approach{border-radius:0 100% 0 0 !important}
.mini-d .about{border-radius:0 !important}
.mini-d .contact{border-radius:0 0 100% 0 !important}

/* Handwriting */
.hand-note{font-family:"Homemade Apple",cursive;color:var(--hand);line-height:1.32;letter-spacing:0;font-size:clamp(18px,1.5vw,26px);transform:rotate(-6deg)}
.hand-note-tight{font-size:clamp(16px,1.35vw,22px);margin-top:22px}
.hand-note-inline{margin-top:16px;display:inline-block;transform:rotate(-7deg)}

/* Work page */
.work-intro{grid-column:1 / span 4;grid-row:5 / span 1;padding:20px 0 0;display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.work-intro p{max-width:33ch;font-size:16px;margin:0}
.work-archive-label{grid-column:1 / span 3;grid-row:12 / span 1;padding-top:16px}
.work-archive-label h2{font-size:clamp(28px,2.25vw,36px);line-height:1.05;margin:0 0 10px;font-weight:600}
.work-archive-label p{font-size:15px;line-height:1.35;max-width:26ch;margin:0}
.card-link-wrap{display:block}
.project-thumb{position:relative;height:calc(var(--unit) * 2);overflow:hidden}
.thumb-swap{position:relative;overflow:hidden;background:#ddd}
.thumb-swap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .18s ease, transform .25s ease}
.thumb-swap .color{opacity:0}
.project-card:hover .thumb-swap .color,.small-project:hover .thumb-swap .color{opacity:1}
.project-card:hover .thumb-swap .bw,.small-project:hover .thumb-swap .bw{opacity:0}
.project-card:hover .thumb-swap img,.small-project:hover .thumb-swap img{transform:scale(1.02)}
.tighter-copy p{font-size:14px;line-height:1.34}
.small-project{position:relative;display:block;overflow:hidden;background:#ddd;color:#fff;min-height:var(--unit)}
.small-thumb{height:100%}
.small-project-caption{position:absolute;inset:auto 0 0 0;padding:10px 10px 8px;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.18));display:flex;flex-direction:column;gap:4px}
.small-project-caption strong{font-size:12px;line-height:1.12;font-weight:600}
.small-project-caption span{font-size:11px;line-height:1.18;opacity:.9}

/* About page */
.about-copy-a,.about-copy-b{align-self:start}
.about-quote p{font-size:clamp(23px,2vw,34px);line-height:1.06;max-width:15ch}
.about-links a{background:linear-gradient(135deg,#d9d9d9,#ececec,#bdbdbd)}

/* Approach page */
.reverse-diagram{padding:24px 24px 20px;background:rgba(244,244,244,.98)}
.reverse-diagram .step{padding:12px 14px;margin-bottom:8px;font-size:15px}
.approach-copy-a,.approach-copy-b,.approach-copy-c{align-self:start}

/* Contact page */
.contact-heading{padding:26px 26px 18px}
.contact-note{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.contact-note p{max-width:35ch;margin:0}
.contact-goodies .article-card strong{font-size:18px;line-height:1.15}

/* Case pages */
.case-frame{min-height:calc(var(--unit) * 14)}
.case-grid{display:grid;grid-template-columns:repeat(6,var(--unit));grid-auto-rows:var(--unit);gap:0}
.case-lead{grid-column:1 / span 2;grid-row:1 / span 4}
.case-lead .shape-content{top:42px;right:30px;left:30px}
.case-hero-image{grid-column:3 / span 4;grid-row:1 / span 4;overflow:hidden}
.case-hero-image .shape-d-right{width:100%;height:100%;background:#ddd}
.case-hero-image img{width:100%;height:100%;object-fit:cover;display:block}
.case-backlink{display:inline-block;margin-top:18px;font-size:14px;font-style:italic}
.case-summary{grid-column:1 / span 2;grid-row:5 / span 3;align-self:start}
.case-summary h2{font-size:clamp(28px,2.25vw,34px);line-height:1.04;font-weight:600;margin:0 0 12px}
.case-summary p{font-size:15px;line-height:1.4;max-width:27ch}
.case-facts{grid-column:3 / span 4;grid-row:5 / span 1;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.fact-card{padding:18px 18px 22px;background:rgba(244,244,244,.96);border-left:1px solid var(--grid)}
.fact-card:first-child{border-left:0}
.fact-card small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:600;margin-bottom:8px}
.fact-card strong{font-size:15px;line-height:1.35;font-weight:600}
.case-diagnostic{grid-column:3 / span 4;grid-row:6 / span 2}
.case-diagnostic h2{font-size:clamp(26px,2.15vw,34px);line-height:1.05;font-weight:600;margin:0 0 14px}
.diag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.diag-grid small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:600;margin-bottom:8px}
.diag-grid p{font-size:14px;line-height:1.38;margin:0}
.case-pull{grid-column:1 / span 6;grid-row:11 / span 1;padding:26px 30px;display:flex;align-items:center}
.case-pull p{font-size:clamp(24px,2.25vw,34px);line-height:1.06;font-weight:600;max-width:22ch;margin:0;color:#f4f4f4}
.case-slideshow{overflow:hidden}
.case-slideshow-inner{position:relative;height:100%;min-height:calc(var(--unit) * 3);background:#ddd}
.slide-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .28s ease}
.slide-image.is-active{opacity:1}
.slide-meta{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0));color:#fff}
.slide-meta small{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.slide-btn{position:absolute;top:12px;border:0;background:rgba(244,244,244,.94);color:#111;width:34px;height:34px;border-radius:50%;cursor:pointer}
.slide-btn.prev{left:12px}.slide-btn.next{right:12px}

@media(max-width:900px){
  .work-intro,.contact-note{display:block}
  .hand-note-tight{display:none}
  .case-grid{grid-template-columns:repeat(6,var(--unit));grid-auto-rows:var(--unit)}
  .case-lead{grid-column:1 / span 6;grid-row:1 / span 3}
  .case-hero-image{grid-column:1 / span 6;grid-row:4 / span 3}
  .case-summary{grid-column:1 / span 6;grid-row:7 / span 2}
  .case-facts{grid-column:1 / span 6;grid-row:9 / span 2;grid-template-columns:1fr}
  .case-diagnostic{grid-column:1 / span 6;grid-row:11 / span 3}
  .diag-grid{grid-template-columns:1fr}
  .case-slideshow[style]{grid-column:1 / span 6 !important}
}


/* =========================================================
   v13 refinements
   ========================================================= */
:root{--mini-dark-end:#444}

/* soft protective glow behind fixed mini-D */
.mini-d::before{content:"";position:absolute;inset:-18px;z-index:-1;border-radius:24px;background:rgba(244,244,244,.08);box-shadow:0 0 44px 30px rgba(244,244,244,.20);pointer-events:none}
.mini-d{filter:none!important;box-shadow:none!important}
.mini-d a{background:linear-gradient(45deg,#050505 0%,#444 100%)!important}
.mini-d a.approach:not(.active):not(:hover){background:linear-gradient(45deg,#050505 0%,#111 18%,#444 80%,#444 100%)!important}
.mini-d a:hover,.mini-d a:not(.active):hover{background:linear-gradient(45deg,#0b63c9 0%,#083a8f 100%)!important}
.mini-d a.active{background:#0A67FF!important}

/* hero tracking and rhythm */
.hero-title{letter-spacing:.012em}
.hero-copy{letter-spacing:.012em}
.approach-title{letter-spacing:.024em}
.approach-sub{letter-spacing:.016em;max-width:43ch!important}

/* Work hero: all opening text lives inside the square */
.work-hero{grid-row:1 / span 4}
.work-hero .shape-content{top:112px!important;left:42px!important;right:38px!important;bottom:30px!important;overflow:visible}
.work-sub{margin:20px 0 0!important}
.hero-detail{margin-top:36px;color:rgba(244,244,244,.58);font-size:15px;line-height:1.42;letter-spacing:.012em}
.hero-detail p{margin:0}
.hero-detail p+p{margin-top:15px}
.work-archive-label{grid-column:1 / span 6;grid-row:11;padding-top:26px;display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.work-archive-label h2{font-size:18px;font-weight:600;margin:0;white-space:nowrap}
.work-archive-label h2 span{font-size:15px;font-weight:400;color:#555;margin-left:8px}

/* archive overlay — long fade with invisible start */
.small-project-caption{padding:56px 10px 9px;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 48%,rgba(0,0,0,.14) 78%,rgba(0,0,0,0) 100%)}

/* Approach tightened composition */
.approach-grid{position:relative}
.approach-hero{grid-row:1 / span 5;z-index:4}
.approach-ghost{grid-column:1 / span 4;grid-row:4 / span 4;z-index:1;opacity:.5}
.approach-copy-a{grid-column:1 / span 3;grid-row:5 / span 2;z-index:5;padding:22px 26px 20px;background:rgba(244,244,244,.92)}
.approach-copy-b{grid-column:4 / span 3;grid-row:6 / span 2;z-index:5;padding:22px 26px 20px;background:rgba(244,244,244,.82)}
.approach-soundbites{grid-column:1 / span 6;grid-row:8 / span 2;display:grid;grid-template-columns:repeat(3,1fr);align-content:start;gap:0;z-index:4}
.approach-soundbites p{margin:0;padding:20px 24px;border-top:1px solid var(--grid);font-size:18px;line-height:1.22;font-weight:600;min-height:var(--unit)}
.approach-soundbites p:nth-child(2n){background:rgba(0,0,0,.035)}
.brand-forces{grid-column:1 / span 6;grid-row:10 / span 3;z-index:4;padding:25px 30px;background:rgba(244,244,244,.95)}
.forces-stage{position:relative;width:620px;height:220px;margin:0 auto;overflow:visible}
.force-square,.force-circle{position:absolute;top:10px;width:200px;height:200px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:15px;line-height:1.2;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.force-square{left:60px;background:#050505;color:#f4f4f4}
.force-circle{left:360px;border-radius:50%;background:#0A67FF;color:#fff;opacity:.92}
.force-overlap{position:absolute;left:185px;top:80px;width:110px;text-align:center;color:#0A67FF;font-family:"Homemade Apple",cursive;font-size:18px;line-height:1.25;opacity:0}
.brand-forces.is-visible .force-circle{animation:creativeRelevance 7.2s cubic-bezier(.22,.75,.25,1) .2s 1 both}
.brand-forces.is-visible .force-overlap{animation:overlapNote 7.2s ease .2s 1 both}
@keyframes creativeRelevance{0%,10%{transform:translateX(0)}35%,62%{transform:translateX(-260px)}90%,100%{transform:translateX(0)}}
@keyframes overlapNote{0%,26%,72%,100%{opacity:0}40%,62%{opacity:1}}
.forces-caption{font-size:15px;line-height:1.35;max-width:48ch;margin:8px auto 0;text-align:center;color:#555}
.approach-copy-c{grid-column:1 / span 3;grid-row:13 / span 2;z-index:4;padding:22px 26px}
.reverse-diagram{grid-column:4 / span 3;grid-row:13 / span 3;z-index:4;padding:22px 24px;background:rgba(244,244,244,.97)}
.reverse-diagram .eyebrow{font-size:14px;margin-bottom:12px}
.approach-shape-2{grid-column:1 / span 3;grid-row:16 / span 3}
.approach-shape-3{grid-column:4 / span 2;grid-row:16 / span 2}
.shape-photo-note{position:absolute;left:18px;bottom:16px;color:rgba(244,244,244,.44);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.approach-margin-note{position:absolute;left:calc(var(--unit)*4.4);top:calc(var(--unit)*17.4);z-index:6;font-size:21px}

/* About mind-map and simplification schematic */
.about-grid{position:relative}
.about-hero{z-index:5}
.portrait-slot{position:absolute;right:14px;bottom:14px;color:rgba(244,244,244,.28);font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.about-ghost{grid-column:1 / span 6;grid-row:4 / span 6;z-index:1;opacity:.34}
.about-map{grid-column:1 / span 6;grid-row:4 / span 6;z-index:3;overflow:visible}
.brand-mindmap{width:100%;height:100%;overflow:visible}
.brand-mindmap text{font-family:"Homemade Apple",cursive;fill:#0b55c8;font-size:20px}
.brand-mindmap .map-center text{font-size:25px;font-weight:600}
.brand-mindmap .map-node>text:first-child{font-size:23px;font-weight:600}
.brand-mindmap .map-node text:not(:first-child){font-size:15px}
.brand-mindmap .map-note text{font-size:16px}
.brand-mindmap .map-lines path{stroke-dasharray:650;stroke-dashoffset:650}
.brand-mindmap.is-visible .map-lines path{animation:drawMap 1.8s ease forwards}
.brand-mindmap.is-visible .map-lines path:nth-child(2n){animation-delay:.18s}
.brand-mindmap.is-visible .map-lines path:nth-child(3n){animation-delay:.32s}
@keyframes drawMap{to{stroke-dashoffset:0}}
.about-copy-a{grid-column:1 / span 3;grid-row:10 / span 3;z-index:4;background:rgba(244,244,244,.86)}
.about-copy-b{grid-column:4 / span 3;grid-row:10 / span 3;z-index:4;background:rgba(244,244,244,.86)}
.about-quote{grid-column:1 / span 3;grid-row:13 / span 3;padding:32px;display:block}
.about-quote p{font-size:clamp(23px,2vw,32px);line-height:1.08;max-width:16ch;margin:0}
.about-quote p+p{margin-top:28px}
.about-simplify{grid-column:4 / span 3;grid-row:13 / span 3;padding:26px 24px;position:relative;overflow:hidden}
.simplify-title{font-size:14px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:18px;font-weight:600}
.simplify-stage{position:relative;height:380px}
.s-node,.s-core{position:absolute;width:112px;height:112px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;line-height:1.2;background:rgba(11,85,200,.12);border:1px solid rgba(11,85,200,.28)}
.s-core{width:150px;height:150px;left:180px;top:130px;background:#0A67FF;color:#fff;font-weight:600}
.n1{left:15px;top:15px}.n2{left:125px;top:15px}.n3{left:235px;top:15px}.n4{left:345px;top:15px}.n5{left:70px;top:130px}
.about-simplify.is-visible .s-node{animation:collapseNodes 1.7s cubic-bezier(.22,.75,.25,1) .2s forwards}
@keyframes collapseNodes{55%{transform:translate(var(--tx,0),var(--ty,0));opacity:.72}100%{transform:scale(.75);opacity:.25}}
.about-links{grid-row:16 / span 2}

/* Contact focus and editorial library */
.d-textarea:focus,.d-email:focus{box-shadow:0 0 0 2px var(--blue)}
.contact-note{grid-column:1 / span 5;grid-row:8 / span 2;padding:24px 0 0 24px;display:flex;align-items:flex-start;gap:40px}
.contact-note p{font-size:16px;line-height:1.42;margin:0}
.contact-note p+p{margin-top:16px}
.contact-hand{margin-left:auto;margin-right:24px;margin-top:22px}
.editorial-library{grid-column:1 / span 6;grid-row:10 / span 6;display:grid;grid-template-columns:repeat(3,2fr);align-items:start}
.editorial-column{width:100%}
.editorial-column h2{font-size:17px;line-height:1.1;letter-spacing:.09em;text-transform:uppercase;margin:0;padding:16px 18px;background:#111;color:#fff}
.editorial-card{min-height:var(--unit);padding:20px 20px 18px;background:linear-gradient(45deg,#efefef 0%,#d8d8d8 100%);border-top:1px solid rgba(255,255,255,.55);display:flex;flex-direction:column}
.editorial-card:nth-of-type(3n+2){background:linear-gradient(45deg,#e7e7e7 0%,#cfcfcf 100%)}
.editorial-card:nth-of-type(3n+3){background:linear-gradient(45deg,#dedede 0%,#c6c6c6 100%)}
.editorial-card small{text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:600;margin-bottom:10px}
.editorial-card h3{font-size:23px;line-height:1.08;margin:0 0 10px;font-weight:600;letter-spacing:.01em}
.editorial-card p{font-size:14px;line-height:1.35;margin:0 0 12px;max-width:30ch}
.editorial-card a{margin-top:auto;font-size:13px;font-style:italic}
.see-all{display:block;padding:13px 18px;font-size:13px;font-weight:600;background:#111;color:#fff}

/* Client pages: the visible construction grid is independent of the text layout */
.case-page .construction-frame{min-height:2600px}
.case-free{position:relative;width:1200px;min-height:2500px}
.case-copy-hero{position:absolute;left:0;top:0;width:400px;min-height:800px;padding:42px 30px 34px;z-index:3}
.case-copy-hero .hero-title{font-size:clamp(32px,2.7vw,44px);line-height:1.04;margin-top:0}
.case-copy-hero .hero-copy{font-size:15px;line-height:1.42;margin-top:24px;max-width:29ch}
.case-backlink{display:inline-block;margin-top:20px;font-size:13px;font-style:italic}
.case-d-image{position:absolute;left:400px;top:0;width:800px;height:800px;z-index:2;overflow:hidden}
.case-d-image .shape-d-right{width:800px;height:800px}
.case-d-image img{width:800px;height:800px;object-fit:cover;display:block}
.case-fact-row{position:absolute;left:400px;top:800px;width:800px;display:grid;grid-template-columns:repeat(3,1fr);z-index:3;background:rgba(244,244,244,.92)}
.case-fact-row>div{padding:20px 18px;min-height:200px;border-left:1px solid var(--grid)}
.case-fact-row>div:first-child{border-left:0}
.case-fact-row small,.diag-grid small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:600;margin-bottom:9px}
.case-fact-row strong{font-size:14px;line-height:1.35;font-weight:600}
.case-summary-free{position:absolute;left:0;top:820px;width:400px;padding:20px 28px 28px;z-index:4;background:rgba(244,244,244,.78)}
.case-summary-free h2{font-size:28px;line-height:1.05;margin:0 0 14px}
.case-summary-free .diag-grid{display:block}
.case-summary-free .diag-grid>div{margin-bottom:22px}
.case-summary-free .diag-grid p{font-size:14px;line-height:1.38;margin:0}
.case-hand{margin-top:16px}
.case-square-gallery{position:absolute;left:0;top:1400px;width:1200px;height:400px;display:flex;align-items:flex-start;z-index:3}
.case-square-show{position:relative;width:400px;height:400px;overflow:hidden;background:#ddd;flex:0 0 400px}
.case-square-show .slide-image{width:400px;height:400px;object-fit:cover}
.case-pull-free{position:absolute;left:0;top:1800px;width:1200px;min-height:200px;padding:34px 30px;display:flex;align-items:center;z-index:3}
.case-pull-free p{font-size:clamp(26px,2.25vw,36px);line-height:1.06;font-weight:600;max-width:22ch;margin:0;color:#f4f4f4}

@media(max-width:900px){
  .forces-stage{transform:scale(.8);transform-origin:left top;width:520px}
  .editorial-library{grid-template-columns:1fr}
  .case-free{width:100%;min-height:2600px}
  .case-copy-hero,.case-d-image,.case-fact-row,.case-summary-free,.case-square-gallery,.case-pull-free{position:relative;left:auto;top:auto;width:100%;height:auto}
  .case-copy-hero{min-height:auto}
  .case-d-image{width:100%;aspect-ratio:1}
  .case-d-image .shape-d-right,.case-d-image img{width:100%;height:100%}
  .case-fact-row{grid-template-columns:1fr}
  .case-square-gallery{display:grid;grid-template-columns:1fr 1fr;height:auto}
  .case-square-show{width:100%;height:auto;aspect-ratio:1}
  .case-square-show .slide-image{width:100%;height:100%}
}


/* =========================================================
   v15 — surgical corrections on the v13 baseline only
   ========================================================= */

/* Mini-D: glow only. No residual filled/shadow panel behind it. */
.mini-d::before{
  content:"";
  position:absolute;
  inset:-26px;
  z-index:-1;
  border-radius:0;
  background:transparent !important;
  box-shadow:0 0 52px 34px rgba(244,244,244,.20);
  filter:none;
  pointer-events:none;
}
.mini-d{filter:none!important;box-shadow:none!important}

/* Case-study construction grid stays independent of text blocks. */
.case-fact-row{
  background:transparent !important;
}
.case-fact-row>div{
  background:transparent !important;
  border-left:0 !important;
  padding:98px 18px 18px !important;
  min-height:300px !important;
}
/* align these labels with 'What they asked for' in the left diagnosis column */
.case-fact-row small{
  margin-top:0 !important;
}

/* Slightly smaller case hero titles, keeping approximately the old line spacing. */
.case-copy-hero .hero-title{
  font-size:clamp(30px,2.45vw,40px) !important;
  line-height:46px !important;
}

/* Bottom dark statement: smaller and one line. */
.case-pull-free p{
  font-size:26px !important;
  line-height:1.1 !important;
  max-width:none !important;
  white-space:nowrap !important;
}

/* Contact copy widths / focus. */
.contact-heading .hero-copy{max-width:48ch !important}
.contact-note>div:first-child{width:650px;flex:0 0 650px}
.d-textarea:focus,.d-email:focus{
  outline:none !important;
  box-shadow:0 0 0 2px var(--blue) !important;
}

/* Editorial cards: subtitles get a longer measure and fixed two-line rhythm. */
.editorial-card p{
  max-width:42ch !important;
  min-height:38px !important;
}
.editorial-card{
  transition:background .22s ease,color .22s ease,transform .22s ease;
}
.editorial-card:hover{
  background:linear-gradient(45deg,#0b63c9 0%,#083a8f 100%) !important;
  color:#fff !important;
}
.editorial-card:hover small,
.editorial-card:hover h3,
.editorial-card:hover p,
.editorial-card:hover a{color:#fff !important}

/* Generated handwritten PNG annotations. */
.annotation-png{display:block;max-width:100%;height:auto;pointer-events:none}
.approach-annotation-a{position:absolute;left:24px;bottom:-28px;width:210px;z-index:8}
.approach-annotation-b{position:absolute;right:18px;top:18px;width:200px;z-index:8}
.approach-annotation-c{position:absolute;right:28px;bottom:12px;width:180px;z-index:8}
.about-map img.mindmap-png{width:88%;height:auto;display:block;margin:3% auto 0;mix-blend-mode:multiply}
.about-hero .about-hand-png{position:absolute;right:30px;bottom:24px;width:175px;z-index:8}
.contact-hand-png{width:210px;margin-left:auto;margin-right:22px;margin-top:8px}
.case-hand-png{width:170px;margin-top:12px}

/* Remove the old webfont handwriting wherever replaced by PNGs. */
.case-hand.hand-note,.contact-hand.hand-note,.approach-margin-note.hand-note{display:none!important}

/* Article pages linked from Contact. */
.article-page{min-height:1800px;padding:24px 0 120px}
.article-back{display:inline-block;margin:0 0 28px;font-size:14px;font-style:italic}
.article-header{max-width:760px;margin-bottom:26px}
.article-header h1{font-size:clamp(36px,4vw,58px);line-height:1.02;margin:12px 0 20px}
.article-hero-image{width:600px;height:600px;object-fit:cover;margin:0 0 34px}
.article-body{max-width:760px;font-size:18px;line-height:1.6}
.article-body p{margin:0 0 18px}

@media(max-width:900px){
  .case-fact-row>div{padding:18px !important;min-height:auto !important}
  .case-copy-hero .hero-title{line-height:1.08 !important}
  .case-pull-free p{white-space:normal !important}
  .contact-note>div:first-child{width:auto;flex:auto}
  .contact-hand-png{display:none}
}

/* =========================================================
   v16 — Approach / About refinement, keeping v15 baseline
   ========================================================= */

/* APPROACH — denser opening and six 1x2 principle cards */
.v16-approach .approach-hero{grid-column:1 / span 5;grid-row:1 / span 5;z-index:5}
.v16-approach .approach-hero .shape-content{
  top:92px !important;
  left:42px !important;
  right:31% !important;
  bottom:34px !important;
  overflow:visible;
}
.approach-inside-copy{margin-top:30px;max-width:38ch;color:rgba(244,244,244,.58)}
.approach-inside-copy h2{font-size:24px;line-height:1.12;margin:0 0 12px;color:rgba(244,244,244,.74);font-weight:600}
.approach-inside-copy p{font-size:15px;line-height:1.42;margin:0 0 12px;color:rgba(244,244,244,.58)}

.v16-approach .approach-copy-b{
  grid-column:1 / span 5;
  grid-row:6 / span 2;
  z-index:4;
  padding:28px 30px 22px;
  background:rgba(244,244,244,.92);
}
.v16-approach .approach-copy-b h2{max-width:16ch}
.v16-approach .approach-copy-b p{max-width:66ch}
.v16-approach .approach-annotation-a{left:auto;right:8px;bottom:-85px;width:420px}

.v16-approach .approach-soundbites{
  grid-column:1 / span 6;
  grid-row:8 / span 2;
  display:grid;
  grid-template-columns:repeat(6,var(--unit));
  height:calc(var(--unit) * 2);
  gap:0;
  z-index:5;
}
.v16-approach .approach-soundbites article{
  height:calc(var(--unit) * 2);
  padding:24px 18px 20px;
  color:#f4f4f4;
  background:linear-gradient(45deg,#080808 0%,#262626 100%);
  border-right:1px solid rgba(255,255,255,.13);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}
.v16-approach .approach-soundbites article:nth-child(2n){background:linear-gradient(45deg,#101010 0%,#303030 100%)}
.v16-approach .approach-soundbites article:last-child{border-right:0}
.v16-approach .approach-soundbites article span{color:var(--blue);font-size:14px;font-weight:600;margin-bottom:24px}
.v16-approach .approach-soundbites article h3{font-size:20px;line-height:1.12;font-weight:600;margin:0 0 18px}
.v16-approach .approach-soundbites article p{font-size:15px;line-height:1.35;font-weight:400;margin:auto 0 0;padding-top:16px;border-top:2px solid var(--blue)}

/* User-supplied After Effects animation replaces CSS prototype */
.v16-approach .brand-forces{
  grid-column:1 / span 6;
  grid-row:10 / span 2;
  padding:42px 32px;
  background:rgba(210,210,210,.42);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:visible;
}
.brand-video-wrap{width:800px;max-width:82%;background:#d0d0d0;overflow:hidden}
.brand-video{display:block;width:100%;height:auto}
.v16-approach .approach-annotation-b{right:-10px;top:180px;width:400px;z-index:8}

/* working backwards: stack at the right, then spread left on entry */
.v16-approach .reverse-diagram{
  grid-column:1 / span 6;
  grid-row:12 / span 4;
  padding:44px 34px 34px;
  background:rgba(244,244,244,.96);
  overflow:visible;
}
.v16-approach .reverse-diagram h2{font-size:34px;line-height:1.05;margin:12px 0 14px;max-width:16ch}
.v16-approach .reverse-diagram>p{font-size:16px;line-height:1.45;max-width:46ch;margin:0}
.backwards-track{position:relative;height:260px;margin-top:36px}
.back-node{
  position:absolute;
  top:26px;
  left:calc(100% - 174px);
  width:154px;height:154px;border-radius:50%;
  border:2px solid var(--blue);
  box-shadow:0 0 0 1px rgba(10,103,255,.26);
  background:rgba(244,244,244,.96);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:18px;color:#0b55c8;font-family:"Homemade Apple",cursive;
  font-size:15px;line-height:1.35;
  transition:left 1.25s cubic-bezier(.22,.75,.25,1), transform 1.25s cubic-bezier(.22,.75,.25,1);
}
.back-node.n1{z-index:1}.back-node.n2{z-index:2}.back-node.n3{z-index:3}.back-node.n4{z-index:4}.back-node.n5{z-index:5}
.back-arrow{position:absolute;top:80px;color:var(--blue);font-size:28px;opacity:0;transition:opacity .45s ease 1s}
.reverse-diagram.is-spread .back-node.n1{left:0}
.reverse-diagram.is-spread .back-node.n2{left:20%}
.reverse-diagram.is-spread .back-node.n3{left:40%}
.reverse-diagram.is-spread .back-node.n4{left:60%}
.reverse-diagram.is-spread .back-node.n5{left:calc(100% - 174px)}
.reverse-diagram.is-spread .a1{left:16%;opacity:1}.reverse-diagram.is-spread .a2{left:36%;opacity:1}.reverse-diagram.is-spread .a3{left:56%;opacity:1}.reverse-diagram.is-spread .a4{left:76%;opacity:1}
.v16-approach .approach-annotation-c{right:10px;bottom:-150px;width:520px}

/* ABOUT — mind map has its own area and never sits behind the black D */
.v16-about .about-hero{grid-column:1 / span 4;grid-row:1 / span 4;z-index:5}
.v16-about .about-ghost{display:none}
.v16-about .about-map{
  grid-column:1 / span 6;
  grid-row:5 / span 5;
  z-index:3;
  overflow:visible;
  width:130%;
  margin-left:-15%;
  padding:26px 0 18px;
  background:rgba(244,244,244,.96);
}
.map-heading{width:76.923%;margin:0 auto 10px;padding:0 28px}
.map-heading p{font-size:14px;color:#666;margin:4px 0 0}
.map-stage{position:relative;width:76.923%;height:870px;margin:0 auto;overflow:visible}
.map-core,.map-node{
  position:absolute;
  border:2px solid var(--blue);
  color:#0b55c8;
  background:rgba(244,244,244,.96);
  border-radius:50%;
  font-family:"Homemade Apple",cursive;
  line-height:1.25;
  text-align:center;
  box-shadow:0 0 0 1px rgba(10,103,255,.23);
}
.map-core{left:calc(50% - 105px);top:320px;width:210px;height:210px;display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:600;z-index:3}
.map-node{width:150px;height:150px;font-size:18px;cursor:pointer;padding:12px;z-index:4;transition:transform .18s ease,background .18s ease,color .18s ease}
.map-node:hover,.map-node:focus,.map-node.is-active{outline:none;transform:scale(1.06) rotate(-1deg);background:#0A67FF;color:#fff}
.map-node.business{left:110px;top:92px}.map-node.offer{left:500px;top:40px}.map-node.audience{left:150px;top:332px}.map-node.positioning{right:145px;top:120px}.map-node.identity{right:90px;top:350px}.map-node.experience{right:235px;bottom:90px}.map-node.growth{left:500px;bottom:46px}.map-node.reputation{left:120px;bottom:95px}
.map-lines{position:absolute;inset:0;z-index:1;background:
 linear-gradient(28deg,transparent 49.7%,rgba(10,103,255,.35) 49.9%,rgba(10,103,255,.35) 50.1%,transparent 50.3%) center/100% 100% no-repeat,
 linear-gradient(-28deg,transparent 49.7%,rgba(10,103,255,.35) 49.9%,rgba(10,103,255,.35) 50.1%,transparent 50.3%) center/100% 100% no-repeat}
.map-detail{position:absolute;left:calc(50% - 240px);top:548px;width:480px;min-height:128px;padding:20px 24px;border:1px solid rgba(10,103,255,.25);background:rgba(244,244,244,.94);z-index:6;color:#0b55c8;opacity:.86}
.map-detail h3{font-family:"Homemade Apple",cursive;font-size:22px;margin:0 0 8px;font-weight:400}
.map-detail ul{margin:0;padding-left:20px;columns:2;column-gap:34px}
.map-detail li{font-size:15px;line-height:1.4;margin-bottom:5px}

.v16-about .about-background{grid-column:1 / span 4;grid-row:10 / span 3;padding:30px 28px 22px;background:rgba(244,244,244,.9);z-index:4}
.v16-about .about-background .eyebrow{font-size:13px;color:#111;letter-spacing:.13em;margin-bottom:18px}
.v16-about .about-background p{font-size:17px;line-height:1.45;max-width:58ch;margin-bottom:16px}
.v16-about .about-copy-a{grid-column:1 / span 3;grid-row:13 / span 3;z-index:4;background:rgba(244,244,244,.9)}
.v16-about .about-copy-b{grid-column:4 / span 3;grid-row:13 / span 3;z-index:4;background:rgba(244,244,244,.9)}
.about-copy-annotation{width:450px;margin-top:16px}
.professionalism{color:#111 !important;font-size:26px !important;line-height:1.08 !important;font-weight:600 !important;max-width:24ch !important;margin-top:30px !important}
.v16-about .about-quote{grid-column:1 / span 3;grid-row:16 / span 2;padding:32px;display:block}
.v16-about .about-quote p{font-size:clamp(23px,2vw,32px);line-height:1.08;max-width:18ch;margin:0}
.v16-about .about-quote p+p{margin-top:28px}
.v16-about .about-editorial{grid-column:1 / span 6;grid-row:18 / span 2;padding:30px 0 0}
.about-editorial-links{display:grid;grid-template-columns:repeat(3,1fr)}
.about-editorial-links a{min-height:var(--unit);padding:24px;border:1px solid var(--grid);background:rgba(244,244,244,.92);display:flex;flex-direction:column;justify-content:flex-end;transition:background .2s ease,color .2s ease}
.about-editorial-links a:hover{background:linear-gradient(45deg,#0b63c9 0%,#083a8f 100%);color:#fff}
.about-editorial-links strong{font-size:21px;margin-bottom:10px}.about-editorial-links span{font-size:14px;line-height:1.38;max-width:30ch}
.v16-about .about-simplify,.v16-about .about-links{display:none}
.v16-about .about-hand-png{width:350px;right:-70px;bottom:-55px}

/* Contact: preserve exact copy and give it room to breathe */
.contact-note>div:first-child{width:760px !important;flex:0 0 760px !important}
.contact-note p{font-size:18px !important;line-height:1.48 !important}

@media(max-width:900px){
  .v16-approach .approach-soundbites{grid-template-columns:repeat(2,1fr);height:auto;grid-row:auto}
  .v16-approach .approach-soundbites article{height:320px}
  .v16-approach .brand-forces,.v16-approach .reverse-diagram{grid-column:1 / span 6;grid-row:auto}
  .brand-video-wrap{max-width:100%}
  .back-node{width:112px;height:112px;font-size:12px}
  .reverse-diagram.is-spread .back-node.n1{left:0}.reverse-diagram.is-spread .back-node.n2{left:20%}.reverse-diagram.is-spread .back-node.n3{left:40%}.reverse-diagram.is-spread .back-node.n4{left:60%}.reverse-diagram.is-spread .back-node.n5{left:calc(100% - 112px)}
  .v16-about .about-map{width:100%;margin-left:0;grid-row:auto}.map-stage{width:100%;transform:scale(.74);transform-origin:top center;margin-bottom:-170px}.map-heading{width:100%}
  .v16-about .about-background,.v16-about .about-copy-a,.v16-about .about-copy-b,.v16-about .about-quote,.v16-about .about-editorial{grid-column:1 / span 6;grid-row:auto}
  .about-editorial-links{grid-template-columns:1fr}.contact-note>div:first-child{width:auto!important;flex:auto!important}
}

/* =========================================================
   v17 — focused Approach / About / editorial corrections
   ========================================================= */

/* Mini-D: remove every rectangular/panel artefact. Glow follows the D itself. */
.mini-d::before{display:none !important}
.mini-d{
  box-shadow:none !important;
  background:transparent !important;
  filter:drop-shadow(0 0 24px rgba(255,255,255,.42)) !important;
}

/* WORK — user-supplied one-second opening video inside the hero square. */
.work-hero .shape-square{position:relative;background:#111}
.work-hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.work-hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(7,7,7,.86) 0%,rgba(16,16,16,.68) 52%,rgba(16,16,16,.28) 100%);
}
.work-hero .shape-content{z-index:2}

/* APPROACH — portrait hero, all explanatory copy inside the black quadrant. */
.v16-approach .approach-hero{grid-column:1 / span 5;grid-row:1 / span 5}
.v16-approach .approach-hero .shape-quarter-tr{
  background:
    linear-gradient(90deg,rgba(10,10,10,.96) 0%,rgba(18,18,18,.86) 48%,rgba(10,10,10,.20) 100%),
    url('assets/about/mug3.png') center right/cover no-repeat !important;
}
.v16-approach .approach-hero .shape-content{
  top:76px !important;left:42px !important;right:39% !important;bottom:30px !important;
}
.v16-approach .approach-sub{max-width:43ch !important;margin-bottom:22px}
.v16-approach .approach-inside-copy{margin-top:20px;max-width:43ch;color:rgba(244,244,244,.64)}
.v16-approach .approach-inside-copy h2{font-size:22px;color:rgba(244,244,244,.78);margin-bottom:10px}
.v16-approach .approach-inside-copy p{font-size:15px;line-height:1.42;color:rgba(244,244,244,.62);max-width:43ch;margin-bottom:10px}
.v16-approach .approach-inside-copy .approach-brief-detail:first-of-type{margin-top:18px}

/* Handwritten note replaces the removed subtitle section. */
.v16-approach .approach-hand-zone{
  grid-column:1 / span 4;grid-row:6 / span 2;z-index:5;display:flex;align-items:center;justify-content:flex-start;
  overflow:visible;padding-left:10px;background:transparent;
}
.v16-approach .approach-hand-zone img{width:600px;max-width:none;height:auto;transform:translateX(-8px) rotate(-1deg)}

/* Six cards: subtle 45-degree tonal separation. No bright blue inside the cards. */
.v16-approach .approach-soundbites{grid-row:8 / span 2}
.v16-approach .approach-soundbites article{
  background:linear-gradient(45deg,#0a0a0a 0%,#282828 100%);
  border-right:1px solid rgba(255,255,255,.12);
}
.v16-approach .approach-soundbites article:nth-child(2n){background:linear-gradient(45deg,#161616 0%,#373737 100%)}
.v16-approach .approach-soundbites article span{color:#808080}
.v16-approach .approach-soundbites article p{color:#b9b9b9;border-top:2px solid #808080}

/* After Effects animation stands alone; no handwritten diagram overlaps it. */
.v16-approach .brand-forces{grid-row:10 / span 2;overflow:hidden}
.v16-approach .approach-annotation-b{display:none !important}

/* Working backwards — wider intro, Source Sans 3, alternating square/circle nodes. */
.v16-approach .reverse-diagram{grid-row:12 / span 4;padding:42px 34px 28px}
.v16-approach .reverse-diagram h2{
  font-size:34px;line-height:1.05;margin:12px 0 14px;max-width:none;white-space:nowrap;
}
.v16-approach .reverse-diagram>p{font-size:17px;line-height:1.46;max-width:92ch;margin:0}
.backwards-track{height:250px;margin-top:32px}
.back-node{
  top:30px;width:154px;height:154px;border:0;box-shadow:none;
  color:#222;font-family:"Source Sans 3","Source Sans Pro",Arial,sans-serif;
  font-size:16px;line-height:1.25;font-weight:600;
  background:#d7d7d7;transition:left 1.25s cubic-bezier(.22,.75,.25,1),transform 1.25s cubic-bezier(.22,.75,.25,1);
}
.back-node.n1,.back-node.n3,.back-node.n5{border-radius:0;background:#d2d2d2}
.back-node.n2,.back-node.n4{border-radius:50%;background:#e7e7e7}
.back-arrow{top:86px;color:#777;font-size:28px;line-height:1;width:28px;text-align:center}
.reverse-diagram.is-spread .a1{left:17.4%}.reverse-diagram.is-spread .a2{left:37.4%}.reverse-diagram.is-spread .a3{left:57.4%}.reverse-diagram.is-spread .a4{left:77.4%}
.v16-approach .approach-annotation-c{display:none !important}

/* ABOUT — portrait hero, no handwritten overlay. */
.v16-about .about-hero{grid-column:1 / span 4;grid-row:1 / span 4}
.v16-about .about-hero .shape-d-right{
  background:
    linear-gradient(90deg,rgba(10,10,10,.96) 0%,rgba(12,12,12,.80) 46%,rgba(8,8,8,.16) 100%),
    url('assets/about/mug1.png') center right/cover no-repeat !important;
}
.v16-about .about-hand-png{display:none !important}

/* The edited chaotic mind map is preserved as two perfectly aligned transparent layers. */
.v16-about .about-map.mindmap-reveal{
  grid-column:1 / span 6;grid-row:5 / span 6;z-index:3;
  width:130%;margin-left:-15%;padding:10px 0 0;background:transparent;overflow:visible;
}
.mindmap-label{width:76.923%;margin:0 auto 10px;padding-left:10px}
.mindmap-stage{
  position:relative;width:100%;aspect-ratio:1400 / 1086;margin:0 auto;overflow:visible;
}
.mindmap-layer{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;
  clip-path:circle(0% at 50% 50%);will-change:clip-path;
}
.mindmap-reveal.is-revealed .mindmap-blue{animation:mindRadial 1s cubic-bezier(.2,.7,.2,1) 0s forwards}
.mindmap-reveal.is-revealed .mindmap-black{animation:mindRadial 1s cubic-bezier(.2,.7,.2,1) 1s forwards}
@keyframes mindRadial{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(82% at 50% 50%)}}

.v16-about .about-background{grid-row:11 / span 3}
.v16-about .about-copy-a{grid-row:14 / span 3}
.v16-about .about-copy-b{grid-row:14 / span 3}
.v16-about .professionalism,.v16-about .about-copy-annotation{display:none !important}

/* Exact two-line About statement: four grid squares wide, one grid square deep. */
.v16-about .about-quote{
  grid-column:1 / span 4;grid-row:17 / span 1;
  height:var(--unit);padding:28px 34px;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(45deg,#0b0b0b 0%,#343434 100%);
}
.v16-about .about-quote p{font-size:clamp(22px,1.9vw,30px);line-height:1.16;max-width:none;margin:0;color:#f4f4f4;white-space:nowrap}
.v16-about .about-quote p+p{margin-top:8px}
.v16-about .about-quote em{font-style:italic}
.v16-about .about-editorial{grid-row:18 / span 2}

/* Editorial/article pages: 4x2 grid image, clearer structure. */
.article-hero-image{
  width:calc(var(--unit) * 4) !important;height:calc(var(--unit) * 2) !important;
  max-width:800px;max-height:400px;object-fit:cover;margin:0 0 34px;
}
.article-body{max-width:800px;font-size:18px;line-height:1.6}
.article-body h2{
  color:var(--blue);font-size:28px;line-height:1.15;font-weight:600;margin:42px 0 16px;letter-spacing:.01em;
}
.article-body h3{
  color:#111;font-size:22px;line-height:1.2;font-weight:700;margin:30px 0 12px;
}
.article-body ul.article-list{margin:8px 0 24px 26px;padding-left:20px}
.article-body ul.article-list li{padding-left:5px;margin:0 0 7px;line-height:1.5}

@media(max-width:900px){
  .v16-approach .approach-hero .shape-content{right:24px !important}
  .v16-approach .approach-hand-zone{grid-column:1 / span 6;grid-row:auto}
  .v16-approach .approach-hand-zone img{width:min(640px,92vw)}
  .v16-approach .reverse-diagram h2{white-space:normal}
  .v16-about .about-map.mindmap-reveal{width:100%;margin-left:0;grid-row:auto}
  .v16-about .about-quote{grid-column:1 / span 6;grid-row:auto;height:auto;min-height:160px}
  .v16-about .about-quote p{white-space:normal}
  .article-hero-image{width:100% !important;height:auto !important;aspect-ratio:2 / 1}
}

/* =========================================================
   v18 — layout clean-up after review
   ========================================================= */

/* Mini-D: no pseudo/background artefact. The only separation is a white D-shaped glow. */
.mini-d::before,
.mini-d::after{content:none !important;display:none !important;background:none !important;box-shadow:none !important}
.mini-d{
  background:transparent !important;
  box-shadow:none !important;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.55)) drop-shadow(0 0 24px rgba(255,255,255,.24)) !important;
  isolation:auto !important;
}

/* APPROACH — make the opening quadrant read as one compact thought. */
.v16-approach .approach-hero .shape-content{
  top:70px !important;
  left:42px !important;
  right:39% !important;
  bottom:28px !important;
}
.v16-approach .approach-title{margin-bottom:20px}
.v16-approach .approach-sub{max-width:43ch !important;margin-bottom:16px !important}
.v16-approach .approach-inside-copy{margin-top:14px !important;max-width:43ch !important}
.v16-approach .approach-inside-copy h2{font-size:21px;line-height:1.12;margin:0 0 9px}
.v16-approach .approach-inside-copy p{font-size:14px;line-height:1.38;margin:0 0 9px}
.v16-approach .approach-inside-copy .approach-brief-detail:first-of-type{margin-top:14px}

/* Handwritten replacement for the removed 'A brief is useful...' block. */
.v16-approach .approach-hand-zone{padding-left:0;align-items:flex-start;padding-top:18px}
.v16-approach .approach-hand-zone img{width:620px;transform:translateX(-18px) rotate(-1deg)}

/* Six cards = six exact 1 × 2 grid units. Blue accents become 50% grey. */
.v16-approach .approach-soundbites article{
  background:linear-gradient(45deg,#090909 0%,#282828 100%) !important;
  border-right:1px solid rgba(255,255,255,.13);
}
.v16-approach .approach-soundbites article:nth-child(even){background:linear-gradient(45deg,#121212 0%,#353535 100%) !important}
.v16-approach .approach-soundbites article span{color:#808080 !important}
.v16-approach .approach-soundbites article p{color:#bdbdbd !important;border-top-color:#808080 !important}

/* Keep the supplied motion graphic visually clean. */
.v16-approach .brand-forces{padding:28px 32px;background:rgba(210,210,210,.38)}
.v16-approach .brand-video-wrap{width:800px;max-width:80%;background:#d2d2d2}
.v16-approach .approach-annotation-b{display:none !important}

/* Working backwards schematic: wide copy, one-line heading, precisely centred nodes/arrows. */
.v16-approach .reverse-diagram{padding:36px 34px 26px}
.v16-approach .reverse-diagram h2{font-size:33px;line-height:1.05;max-width:none;white-space:nowrap;margin:10px 0 12px}
.v16-approach .reverse-diagram>p{max-width:94ch;font-size:17px;line-height:1.43}
.v16-approach .backwards-track{height:235px;margin-top:26px}
.v16-approach .back-node{
  width:154px;height:154px;top:28px;
  font-family:"Source Sans 3","Source Sans Pro",Arial,sans-serif;
  font-size:16px;line-height:1.22;font-weight:600;
  padding:20px;text-align:center;color:#222;border:0;box-shadow:none;
}
.v16-approach .back-node.n1,.v16-approach .back-node.n3,.v16-approach .back-node.n5{border-radius:0;background:#d2d2d2}
.v16-approach .back-node.n2,.v16-approach .back-node.n4{border-radius:50%;background:#e8e8e8}
.v16-approach .back-arrow{top:83px;width:32px;margin:0;text-align:center;color:#777;font-size:28px}
.reverse-diagram.is-spread .a1{left:17.35%}.reverse-diagram.is-spread .a2{left:37.35%}.reverse-diagram.is-spread .a3{left:57.35%}.reverse-diagram.is-spread .a4{left:77.35%}

/* ABOUT — portrait stays wholly in the D; mind map gets a separate oversized field below. */
.v16-about .about-hero .shape-d-right{
  background:
    linear-gradient(90deg,rgba(10,10,10,.97) 0%,rgba(12,12,12,.80) 45%,rgba(8,8,8,.10) 100%),
    url('assets/about/mug1.png') center right/cover no-repeat !important;
}
.v16-about .about-hero .shape-content{right:38% !important}
.v16-about .about-map.mindmap-reveal{
  grid-column:1 / span 6;
  grid-row:5 / span 6;
  width:126%;
  margin-left:-13%;
  padding-top:8px;
  overflow:visible;
  background:transparent;
}
.v16-about .mindmap-label{width:79.365%;padding-left:0;margin:0 auto 8px}
.v16-about .mindmap-stage{width:100%;aspect-ratio:1400 / 1086}
.v16-about .mindmap-layer{object-fit:contain}

/* About statement: exactly 4 grid units × 1, only the two requested lines. */
.v16-about .about-quote{grid-column:1 / span 4;grid-row:17 / span 1;height:var(--unit);padding:24px 32px}
.v16-about .about-quote p{font-size:clamp(21px,1.75vw,28px);line-height:1.12;white-space:nowrap}
.v16-about .about-quote p+p{margin-top:7px}

/* Editorial articles / marketing thinking / case studies. */
.article-hero-image{
  display:block;
  width:calc(var(--unit) * 4) !important;
  height:calc(var(--unit) * 2) !important;
  max-width:800px !important;
  max-height:400px !important;
  object-fit:cover !important;
  margin:0 0 36px 0 !important;
}
.article-body{max-width:800px;font-size:18px;line-height:1.6}
.article-body h2{color:var(--blue);font-size:29px;line-height:1.14;font-weight:650;margin:42px 0 15px}
.article-body h3{font-size:22px;line-height:1.2;font-weight:700;margin:30px 0 11px}
.article-body ul,.article-body ul.article-list{margin:8px 0 24px 30px;padding-left:22px;list-style:disc outside}
.article-body li{padding-left:4px;margin:0 0 7px;line-height:1.5}

@media(max-width:900px){
  .v16-approach .approach-hero .shape-content{right:24px !important}
  .v16-approach .approach-hand-zone img{width:min(620px,94vw);transform:none}
  .v16-approach .reverse-diagram h2{white-space:normal}
  .v16-about .about-hero .shape-content{right:24px !important}
  .v16-about .about-map.mindmap-reveal{width:100%;margin-left:0}
  .v16-about .about-quote{grid-column:1 / span 6;height:auto;min-height:160px}
  .v16-about .about-quote p{white-space:normal}
}
.portrait-slot{display:none !important}

/* =========================================================
   v19 — focused layout refinements
   ========================================================= */

/* Mini-D: keep only a broad, low-contrast white glow. */
.mini-d{
  filter:
    drop-shadow(0 0 48px rgba(255,255,255,.28))
    drop-shadow(0 0 78px rgba(255,255,255,.14)) !important;
}

/* APPROACH */
.v16-approach .approach-hand-zone{
  grid-column:1 / span 3;
  grid-row:6 / span 2;
  padding-left:16px;
  align-items:flex-start;
  padding-top:16px;
  overflow:visible;
}
.v16-approach .approach-hand-zone img{
  width:320px;
  max-width:100%;
  height:auto;
  transform:rotate(-1deg);
}

/* The After Effects animation has moved to Work. */
.v16-approach .brand-forces{display:none !important}

/* Sweet-spot handwritten image immediately below the six cards. */
.v16-approach .approach-sweet-spot{
  grid-column:1 / span 4;
  grid-row:10 / span 2;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:18px 0 10px 18px;
  background:transparent;
  overflow:visible;
}
.v16-approach .approach-sweet-spot img{
  width:600px;
  max-width:100%;
  height:auto;
  mix-blend-mode:multiply;
}

/* Bring the working-backwards section straight up after the sweet-spot image. */
.v16-approach .reverse-diagram{
  grid-row:12 / span 4;
  margin-top:0;
}

/* ABOUT */
.v16-about .about-map.mindmap-reveal{
  grid-column:1 / span 6;
  grid-row:6 / span 6; /* leaves a full grid row after the hero */
  width:116.6667%;
  margin-left:-8.33335%;
  padding-top:22px;
}
.mindmap-label{
  width:85.714%;
  margin:0 auto 22px;
  padding-left:12px;
}
.mindmap-stage{
  width:100%;
  aspect-ratio:1400 / 1086;
}

/* White image backgrounds disappear against the off-white page through multiply.
   This avoids premultiplied-alpha halos and faint pre-reveal black edges. */
.mindmap-layer{
  mix-blend-mode:multiply;
  image-rendering:auto;
  backface-visibility:hidden;
  transform:translateZ(0);
}

/* Four seconds total: blue expands for 2s, black follows for 2s. */
.mindmap-reveal.is-revealed .mindmap-blue{
  animation:mindRadialV19 2s cubic-bezier(.2,.7,.2,1) 0s forwards;
}
.mindmap-reveal.is-revealed .mindmap-black{
  animation:mindRadialV19 2s cubic-bezier(.2,.7,.2,1) 2s forwards;
}
@keyframes mindRadialV19{
  from{clip-path:circle(0% at 50% 50%)}
  to{clip-path:circle(82% at 50% 50%)}
}

/* Tighten the material immediately beneath the mind map. */
.v16-about .about-background{
  grid-column:1 / span 6;
  grid-row:12 / span 2;
  margin:0;
}
.v16-about .about-copy-a{
  grid-column:1 / span 3;
  grid-row:14 / span 2;
  margin:0;
}
.v16-about .about-copy-b{
  grid-column:4 / span 3;
  grid-row:14 / span 2;
  margin:0;
}
.v16-about .about-quote{
  grid-row:16 / span 1;
  margin:0;
}
.v16-about .about-editorial{
  grid-row:17 / span 2;
  padding-top:18px;
  margin:0;
}

/* WORK — place the supplied marketing/creativity animation after case 06. */
.work-brand-forces{
  grid-column:1 / span 4;
  grid-row:11 / span 1;
  width:calc(var(--unit) * 4);
  height:var(--unit);
  overflow:hidden;
  background:transparent;
}
.work-brand-video-wrap,
.work-brand-video{
  width:100%;
  height:100%;
  display:block;
}
.work-brand-video{
  object-fit:cover;
}

/* CONTACT — 3× larger handwritten annotation, with its arrow naturally on the left. */
.contact-note{
  position:relative;
  overflow:visible;
}
.contact-hand-png-v19{
  width:600px;
  flex:0 0 600px;
  margin-left:-110px;
  margin-right:-250px;
  margin-top:-20px;
  overflow:visible;
  position:relative;
  z-index:5;
}
.contact-hand-png-v19 img{
  width:600px;
  max-width:none;
  height:auto;
}

@media(max-width:900px){
  .v16-approach .approach-hand-zone{
    grid-column:1 / span 6;
    grid-row:auto;
  }
  .v16-approach .approach-hand-zone img{width:260px}
  .v16-approach .approach-sweet-spot{
    grid-column:1 / span 6;
    grid-row:auto;
    padding-left:0;
  }
  .v16-approach .approach-sweet-spot img{width:100%}
  .v16-about .about-map.mindmap-reveal{
    width:100%;
    margin-left:0;
    grid-row:auto;
  }
  .v16-about .about-background,
  .v16-about .about-copy-a,
  .v16-about .about-copy-b,
  .v16-about .about-quote,
  .v16-about .about-editorial{
    grid-column:1 / span 6;
    grid-row:auto;
  }
  .work-brand-forces{
    grid-column:1 / span 6 !important;
    grid-row:auto !important;
    width:100%;
    height:auto;
    aspect-ratio:4 / 1;
  }
  .contact-hand-png-v19{
    display:none;
  }
}

/* =========================================================
   v20 — contact copy + retouched mind-map layers
   ========================================================= */

/* CONTACT: force the opening sentence to remain exactly two lines. */
.contact-heading .hero-copy{
  max-width:760px !important;
  width:760px !important;
  font-size:18px;
}

/* Wider copy block below the form, followed directly by the handwritten note. */
.contact-note{
  grid-column:1 / span 6 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:18px !important;
  overflow:visible !important;
  padding-top:24px !important;
}
.contact-note-copy{
  width:720px !important;
  flex:0 0 720px !important;
}
.contact-note-copy p{
  max-width:none !important;
  width:100% !important;
  font-size:18px !important;
  line-height:1.48 !important;
  margin:0 !important;
}
.contact-note-copy p+p{margin-top:18px !important}
.contact-hand-v20{
  display:flex;
  align-items:center;
  gap:4px;
  margin-top:20px;
  margin-left:-10px;
  height:112px;
  overflow:visible;
}
.contact-arrow-v20{
  width:76px;
  height:auto;
  transform:scaleX(-1) rotate(-8deg);
  transform-origin:center;
  flex:0 0 auto;
}
.contact-hand-text-v20{
  width:275px;
  height:auto;
  flex:0 0 auto;
}
/* Disable the obsolete combined annotation from v19 if cached markup survives. */
.contact-hand-png-v19{display:none !important}

/* ABOUT: bring A HOLISTIC VIEW slightly closer to the hero without crowding it. */
.v16-about .about-map.mindmap-reveal{
  grid-row:6 / span 6;
  padding-top:4px !important;
}
.mindmap-label{
  margin-bottom:12px !important;
  transform:translateY(-18px);
}

/* User-retouched images are opaque RGB white-background layers.
   Multiply makes white optically disappear against the off-white page, while
   retaining clean antialiased blue/black edges. No opacity animation is used. */
.mindmap-stage{isolation:isolate}
.mindmap-layer{
  mix-blend-mode:multiply !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  image-rendering:auto !important;
  backface-visibility:hidden;
  transform:none !important;
}

@media(max-width:900px){
  .contact-heading .hero-copy{width:auto !important;max-width:100% !important}
  .contact-note{display:block !important}
  .contact-note-copy{width:auto !important;flex:auto !important}
  .contact-hand-v20{margin:20px 0 0 0;height:auto}
  .contact-arrow-v20{width:58px}
  .contact-hand-text-v20{width:220px}
  .mindmap-label{transform:none}
}
\n/* =========================================================\n   v21 — supplied annotation/mind-map corrections\n   ========================================================= */\n.v16-approach .approach-sweet-spot img{mix-blend-mode:normal !important;background:transparent !important;}\n.mindmap-stage{isolation:auto !important;}\n.mindmap-layer{mix-blend-mode:normal !important;opacity:1 !important;filter:none !important;-webkit-mask-image:none !important;mask-image:none !important;image-rendering:auto !important;}\n.contact-note{grid-column:1 / span 6 !important;display:flex !important;align-items:flex-start !important;justify-content:flex-start !important;gap:24px !important;overflow:visible !important;padding-top:24px !important;}\n.contact-note-copy{width:430px !important;flex:0 0 430px !important;}\n.contact-note-copy p{width:100% !important;max-width:none !important;margin:0 !important;}\n.contact-note-copy p + p{margin-top:18px !important;}\n.contact-hand-v21{width:370px;flex:0 0 370px;margin-top:-8px;margin-left:0;overflow:visible;}\n.contact-hand-v21 img{width:100%;height:auto;display:block;}\n.contact-hand-v20,.contact-arrow-v20,.contact-hand-text-v20{display:none !important;}\n@media(max-width:900px){.contact-note{display:block !important}.contact-note-copy{width:auto !important;flex:auto !important}.contact-hand-v21{width:min(360px,85vw);margin:18px 0 0 0;}}\n

/* =========================================================
   v22 — targeted Work / Approach / Contact refinements
   ========================================================= */

/* WORK: keep the first six cards physically still on hover.
   Preserve the existing drop shadow and image enlargement inside the card. */
.project-card.lift:hover{
  transform:none !important;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.14)) !important;
}

/* New archive heading is a single continuous line. */
.work-archive-label{
  grid-column:1 / span 6 !important;
}
.work-archive-label h2{
  white-space:nowrap !important;
  max-width:none !important;
}

/* APPROACH: align the eyebrow vertically with Work/About. */
.v16-approach .approach-hero .shape-content{
  top:112px !important;
}

/* CONTACT: match the supplied proportions more closely.
   Formal copy remains 2 grid units-ish wide; the handwritten note follows
   immediately to its right and sits higher, as in the reference screenshot. */
.contact-note{
  grid-column:1 / span 5 !important;
  gap:6px !important;
  padding-top:24px !important;
  align-items:flex-start !important;
}
.contact-note-copy{
  width:430px !important;
  flex:0 0 430px !important;
}
.contact-hand-v21{
  width:350px !important;
  flex:0 0 350px !important;
  margin-left:-4px !important;
  margin-top:-74px !important;
}
.contact-hand-v21 img{
  width:350px !important;
  max-width:none !important;
  height:auto !important;
}

@media(max-width:900px){
  .v16-approach .approach-hero .shape-content{
    top:76px !important;
  }
  .work-archive-label h2{
    white-space:normal !important;
  }
  .contact-hand-v21{
    width:min(350px,85vw) !important;
    margin:18px 0 0 0 !important;
  }
}


/* =========================================================
   v23 — article byline, About copy, footer
   ========================================================= */

/* Mind-map layers: explicitly normal compositing. */
.mindmap-layer,
.mindmap-black,
.mindmap-blue{
  mix-blend-mode:normal !important;
  background-blend-mode:normal !important;
}

/* About hero copy replacement. */
.v16-about .about-hero .shape-content{
  overflow:visible !important;
}
.v16-about .about-hero .hero-title{
  margin-bottom:20px;
}
.v16-about .about-hero .about-wide-copy{
  max-width:37ch;
  font-size:clamp(14px,1.02vw,17px);
  line-height:1.42;
  margin:0 0 13px;
  color:#f1f1f1;
}
.v16-about .about-hero .about-third{
  margin-top:22px;
}

/* Pull everything from “DAREN — branding with background” upwards by one 200px grid unit. */
.v16-about .about-background{
  grid-row:11 / span 2 !important;
}
.v16-about .about-copy-a{
  grid-row:13 / span 2 !important;
}
.v16-about .about-copy-b{
  grid-row:13 / span 2 !important;
}
.v16-about .about-quote{
  grid-row:15 / span 1 !important;
}
.v16-about .about-editorial{
  display:none !important;
}

/* Standard author signoff for all editorial articles. */
.article-author{
  margin-top:64px;
  padding-top:24px;
  border-top:1px solid var(--grid);
  max-width:760px;
}
.article-author p{
  margin:0;
}
.article-author-name{
  font-size:20px;
  line-height:1.35;
  font-weight:600;
}
.article-author-role{
  font-size:18px;
  line-height:1.4;
  margin-top:4px !important;
}
.article-author-bio{
  margin-top:22px !important;
  max-width:74ch;
  color:#777;
  font-size:14px;
  line-height:1.55;
}
.article-author-last{
  margin-top:9px !important;
}

/* Footer: full-browser width, 200px high, separated from content by one grid unit. */
.site-footer{
  width:100%;
  height:200px;
  margin-top:200px;
  background:#ececec;
  border-top:1px solid rgba(0,0,0,.04);
}
.site-footer-inner{
  height:100%;
  display:flex;
  align-items:center;
  padding-left:max(20px, calc((100vw - var(--frame))/2 + 100px));
}
.footer-d-mark{
  width:76px;
  height:60px;
  flex:0 0 76px;
  display:block;
  background:linear-gradient(135deg,#0b0b0b 0%,#3a3a3d 100%);
  border-radius:0 30px 30px 0;
  margin-right:22px;
}
.footer-wordmark{
  display:inline-flex;
  align-items:baseline;
  gap:0;
  font-family:"Source Sans 3","Source Sans Pro",Arial,sans-serif;
  font-size:26px;
  line-height:1;
  letter-spacing:.015em;
  white-space:nowrap;
}
.footer-wordmark strong{
  font-weight:700;
  color:#111;
}
.footer-wordmark span{
  font-weight:400;
  color:#8a8a8a;
}

/* Keep the footer close to content on responsive layouts while retaining its 200px height. */
@media(max-width:900px){
  .v16-about .about-background,
  .v16-about .about-copy-a,
  .v16-about .about-copy-b,
  .v16-about .about-quote{
    grid-row:auto !important;
  }
  .site-footer{
    margin-top:100px;
  }
  .site-footer-inner{
    padding-left:20px;
  }
  .footer-d-mark{
    width:64px;
    height:52px;
    flex-basis:64px;
    border-radius:0 26px 26px 0;
    margin-right:16px;
  }
  .footer-wordmark{
    font-size:22px;
  }
}


/* =========================================================
   v24 — contact anchoring, mind-map registration, footer
   ========================================================= */

/* APPROACH: supplied sweet-spot image is already composited on the correct
   background colour. Render it literally. */
.v16-approach .approach-sweet-spot img{
  mix-blend-mode:normal !important;
  background:transparent !important;
  opacity:1 !important;
  filter:none !important;
}

/* ABOUT: both Photoshop exports are the same 1400×1086 canvas.
   Force both layers to the exact same full-canvas box and origin.
   Transparent/empty pixels no longer influence registration. */
.mindmap-stage{
  position:relative !important;
  aspect-ratio:1400 / 1086 !important;
}
.mindmap-layer,
.mindmap-blue,
.mindmap-black{
  position:absolute !important;
  inset:0 !important;
  left:0 !important;
  top:0 !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:fill !important;
  object-position:0 0 !important;
  transform:none !important;
  mix-blend-mode:normal !important;
  background-blend-mode:normal !important;
  opacity:1 !important;
}

/* CONTACT: the annotation is now physically inside .contact-note-copy,
   so its left position is always measured from the copy's right edge. */
.contact-note{
  display:block !important;
  position:relative !important;
  overflow:visible !important;
}
.contact-note-copy{
  position:relative !important;
  width:430px !important;
  max-width:430px !important;
  flex:none !important;
}
.contact-hand-v21{
  position:absolute !important;
  left:calc(100% + 10px) !important;
  top:-74px !important;
  width:350px !important;
  margin:0 !important;
  padding:0 !important;
  z-index:5 !important;
}
.contact-hand-v21 img{
  display:block !important;
  width:350px !important;
  max-width:none !important;
  height:auto !important;
}

/* FOOTER: remove the old 3-grid-unit page padding.
   The footer itself now starts exactly 200px after the page's last grid element. */
.site-footer-page .page-shell{
  padding-bottom:0 !important;
}
.site-footer{
  height:200px !important;
  margin-top:200px !important;
}

/* Exact 60×60 composite D, using the same four-piece language as the nav. */
.footer-d-mark{
  width:60px !important;
  height:60px !important;
  flex:0 0 60px !important;
  display:grid !important;
  grid-template-columns:30px 30px !important;
  grid-template-rows:30px 30px !important;
  background:none !important;
  border-radius:0 !important;
  overflow:visible !important;
  margin-right:26px !important;
}
.footer-d-mark i{
  display:block;
  width:30px;
  height:30px;
  background:linear-gradient(45deg,#050505 0%,#444 100%);
}
.footer-d-mark .fd-work{
  grid-column:1;grid-row:1;
}
.footer-d-mark .fd-approach{
  grid-column:2;grid-row:1;
  border-radius:0 100% 0 0;
}
.footer-d-mark .fd-about{
  grid-column:1;grid-row:2;
}
.footer-d-mark .fd-contact{
  grid-column:2;grid-row:2;
  border-radius:0 0 100% 0;
}

/* Stronger inter-lettering across DARENBRANDING. */
.footer-wordmark{
  gap:0 !important;
  font-size:26px !important;
  letter-spacing:.19em !important;
}
.footer-wordmark strong,
.footer-wordmark span{
  letter-spacing:.19em !important;
}

/* Keep the requested desktop left alignment: 200px at the 1400 / 1200 grid reference. */
.site-footer-inner{
  padding-left:max(20px, calc((100vw - var(--frame))/2 + 100px)) !important;
}

@media(max-width:900px){
  .contact-note-copy{
    width:auto !important;
    max-width:none !important;
  }
  .contact-hand-v21{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:min(350px,85vw) !important;
    margin-top:18px !important;
  }
  .contact-hand-v21 img{
    width:100% !important;
    max-width:100% !important;
  }
  .site-footer{
    margin-top:100px !important;
  }
}


/* =========================================================
   v25 — home PNG handwriting, work/approach/contact/case corrections
   ========================================================= */

/* Slightly larger white glow behind the mini-D. */
.mini-d::before{
  box-shadow:0 0 82px 52px rgba(244,244,244,.24) !important;
}

/* HOME — raster handwritten overlays instead of editable text. */
.home-note,
.home-hover{
  font-size:0 !important;
  line-height:0 !important;
}
.home-note img,
.home-hover img{
  display:block;
  width:100%;
  height:auto;
}
.home-hover{
  width:290px;
}
.home-note{width:250px;}

/* WORK — remove the dark overlay so the hero film plays at normal brightness. */
.work-hero-overlay{
  display:none !important;
}
.work-hero-video{
  filter:none !important;
  opacity:1 !important;
}

/* Keep the first six project cards still on hover while preserving the shadow and image zoom. */
.work-grid > .project-card.lift:hover{
  transform:none !important;
}

/* APPROACH — remove the dark overlay/gradient from the hero portrait. */
.v16-approach .approach-hero .shape-quarter-tr{
  background:url('assets/about/mug3.png') center right/cover no-repeat !important;
}

/* ABOUT — reduce overall mind-map scale to 90% and keep it centred. */
.v16-about .about-map{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}
.v16-about .mindmap-stage{
  width:90% !important;
  margin:0 auto !important;
}
.v16-about .mindmap-layer,
.v16-about .mindmap-blue,
.v16-about .mindmap-black{
  mix-blend-mode:normal !important;
  object-fit:fill !important;
  object-position:0 0 !important;
}

/* CONTACT — move the quarter-circle form up 200px and lift the heading block 40px. */
.contact-form-shape{
  transform:translateY(-200px) !important;
}
.contact-heading{
  transform:translateY(-40px) !important;
  padding-top:40px !important;
}
.contact-heading .eyebrow{
  margin-bottom:14px !important;
}

/* CLIENT CASES — no annotations, one 400x400 slideshow aligned left, slideshow and black band 200px higher. */
.case-page .case-hand-png,
.case-page .case-hand,
.case-page .annotation-png{
  display:none !important;
}
.case-page .case-square-gallery{
  top:1200px !important;
  left:0 !important;
  width:400px !important;
  height:400px !important;
  display:block !important;
}
.case-page .case-square-gallery .case-square-show{
  width:400px !important;
  height:400px !important;
  flex:0 0 400px !important;
}
.case-page .case-square-gallery .case-square-show + .case-square-show{
  display:none !important;
}
.case-page .case-square-gallery .slide-image{
  width:400px !important;
  height:400px !important;
  object-fit:cover !important;
}
.case-page .case-pull-free{
  top:1600px !important;
}
.case-page .case-free{
  min-height:2100px !important;
}
.case-page .construction-frame{
  min-height:2200px !important;
}

@media(max-width:900px){
  .contact-form-shape,
  .contact-heading{
    transform:none !important;
  }
  .v16-about .mindmap-stage{
    width:100% !important;
  }
  .case-page .case-square-gallery,
  .case-page .case-pull-free,
  .case-page .case-free,
  .case-page .construction-frame{
    top:auto !important;
    min-height:auto !important;
    width:100% !important;
  }
  .case-page .case-square-gallery{
    height:auto !important;
  }
  .case-page .case-square-gallery .case-square-show,
  .case-page .case-square-gallery .slide-image{
    width:100% !important;
    height:100% !important;
  }
}


/* =========================================================
   v26 — About photo + completed case-study archive
   ========================================================= */

/* ABOUT: no dark overlay over the portrait. */
.v16-about .about-hero .shape-d-right{
  background:url('assets/about/mug1.png') center right/cover no-repeat !important;
}

/* Case-study rule for all current/future client pages. */
.case-page .case-hand-png,
.case-page .case-hand,
.case-page .annotation-png{
  display:none !important;
}
.case-page .case-square-gallery{
  left:0 !important;
  width:400px !important;
  display:block !important;
}
.case-page .case-square-show{
  width:400px !important;
  height:400px !important;
}
.case-page .case-square-show .slide-image{
  width:400px !important;
  height:400px !important;
  object-fit:cover !important;
}

@media(max-width:900px){
  .case-page .case-square-gallery,
  .case-page .case-square-show,
  .case-page .case-square-show .slide-image{
    width:100% !important;
  }
}


/* =========================================================
   v27 — homepage annotation sizing and case-page text/slideshow balance
   ========================================================= */

/* Keep the homepage note in the corrected annotation style. */
.home-note{width:250px;}

/* All client pages: move the single 400x400 slideshow to columns 3–4. */
.case-page .case-square-gallery{
  left:400px !important;
}

/* Slightly more breathing room for the first-column copy. */
.case-page .case-copy-hero .hero-copy{
  max-width:31ch !important;
}
.case-page .case-summary-free .diag-grid p{
  line-height:1.42 !important;
}

@media(max-width:900px){
  .case-page .case-square-gallery{
    left:auto !important;
  }
}


/* =========================================================
   v28 — editorial directory / article system / language switch
   ========================================================= */

.lang-switch{
  position:absolute;
  z-index:110;
  top:62px;
  left:calc(50% + (var(--unit) * 2));
  width:var(--unit);
  text-align:right;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#777;
}
.lang-switch span,.lang-switch strong{margin-left:7px}
.lang-switch strong{font-weight:900;color:#111}
.lang-switch .lang-disabled{color:#aaa}

.home-body .lang-switch{
  left:auto;
  right:7vw;
  width:auto;
  top:26px;
}

.footer-contact-cta{
  margin-left:auto;
  width:200px;
  height:52px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111;
  color:#f4f4f4;
  font-weight:700;
  letter-spacing:.04em;
  transition:background .18s ease;
}
.footer-contact-cta:hover{background:var(--blue)}

.editorial-directory{
  grid-column:1 / span 6;
  margin-top:calc(var(--unit) * 1);
  padding-bottom:var(--unit);
  border-top:1px solid var(--grid);
}
.editorial-directory-section{
  display:grid;
  grid-template-columns:repeat(6,var(--unit));
  border-bottom:1px solid var(--grid);
  min-height:var(--unit);
}
.editorial-directory-label{
  grid-column:1 / span 2;
  position:relative;
  padding:30px 28px;
  border-right:1px solid var(--grid);
}
.editorial-directory-label::after{
  content:"";
  position:absolute;
  right:28px;
  bottom:28px;
  width:72px;height:72px;
  background:linear-gradient(135deg,rgba(20,20,20,.03),rgba(20,20,20,.10));
  border-radius:0 100% 0 0;
}
.editorial-directory-label h2{
  margin:0;
  max-width:9ch;
  font-size:30px;
  line-height:1.02;
  font-weight:900;
  letter-spacing:.01em;
  text-transform:none;
}
.editorial-directory-items{grid-column:3 / span 4}
.editorial-directory-row{
  position:relative;
  min-height:120px;
  display:grid;
  grid-template-columns:repeat(4,var(--unit));
  align-items:stretch;
  border-bottom:1px solid var(--grid);
  background:rgba(244,244,244,.72);
  transition:background .18s ease;
}
.editorial-directory-row:last-child{border-bottom:0}
.editorial-directory-row h3{
  grid-column:1 / span 2;
  margin:0;
  padding:26px 28px;
  font-size:22px;
  line-height:1.08;
  font-weight:900;
  letter-spacing:.004em;
  text-transform:none;
  transition:color .18s ease;
}
.editorial-directory-row p{
  grid-column:3 / span 2;
  margin:0;
  padding:27px 46px 26px 28px;
  border-left:1px solid var(--grid);
  color:#777;
  font-size:15px;
  line-height:1.4;
}
.editorial-directory-row .row-arrow{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  color:transparent;
  font-size:22px;
  transition:color .18s ease;
}
.editorial-directory-row:hover{background:rgba(10,103,255,.045)}
.editorial-directory-row:hover h3,
.editorial-directory-row:hover .row-arrow{color:var(--blue)}

.article-body{
  font-size:17px;
  line-height:1.7;
}
.article-body p{margin-bottom:24px}
.article-body h2{
  margin-top:52px;
  margin-bottom:18px;
  color:var(--blue);
}
.article-list{
  margin:8px 0 30px 22px;
  padding-left:18px;
}
.article-list li{
  margin:8px 0;
  padding-left:4px;
}
.article-pull{
  margin:48px 0 50px;
  padding:24px 0 25px;
  border-top:1px solid #aaa;
  border-bottom:1px solid #aaa;
  font-size:30px;
  line-height:1.18;
  font-weight:600;
  letter-spacing:.005em;
  color:#222;
}
.article-prev-next{
  margin-top:56px;
  padding:22px 0;
  border-top:1px solid var(--grid);
  border-bottom:1px solid var(--grid);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  font-size:14px;
}
.article-prev-next .next{text-align:right}
.article-prev-next a:hover{color:var(--blue)}
.article-contact-cta{
  margin-top:38px;
  padding:28px 0 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.article-contact-cta p{
  margin:0;
  font-size:24px;
  font-weight:600;
}
.article-contact-cta a{
  flex:0 0 190px;
  height:52px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111;
  color:#fff;
  font-weight:700;
}
.article-contact-cta a:hover{background:var(--blue)}

@media(max-width:900px){
  .lang-switch{top:18px;right:12px;left:auto;width:auto}
  .footer-contact-cta{width:160px}
  .editorial-directory{margin-top:80px}
  .editorial-directory-section{display:block}
  .editorial-directory-label{
    border-right:0;
    border-bottom:1px solid var(--grid);
    min-height:140px;
  }
  .editorial-directory-row{
    display:block;
    min-height:0;
  }
  .editorial-directory-row h3,
  .editorial-directory-row p{
    padding:20px 22px;
  }
  .editorial-directory-row p{
    padding-top:0;
    border-left:0;
  }
  .article-pull{font-size:25px}
  .article-contact-cta{align-items:flex-start;flex-direction:column}
}


/* =========================================================
   v29 — footer alignment, ABOUT/CONTACT positioning, article signature, Fred artwork
   ========================================================= */

/* Put the footer content back on the page grid. */
.site-footer-inner{
  width:min(var(--frame), calc(100vw - 40px)) !important;
  margin:0 auto !important;
  padding:0 !important;
}
.footer-contact-cta{
  margin-left:auto !important;
}
@media(max-width:900px){
  .site-footer-inner{
    width:calc(100vw - 20px) !important;
  }
}

/* ABOUT: lift the holistic-view block back up. */
.v16-about .about-map.mindmap-reveal{
  transform:translateY(-100px) !important;
}

/* CONTACT: move the note block back up by one grid unit. */
.contact-note{
  transform:translateY(-200px) !important;
}
@media(max-width:900px){
  .contact-note{
    transform:none !important;
  }
}

/* Article signature block with the transparent D-shaped portrait. */
.article-author{
  max-width:760px;
}
.article-author-head{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:18px;
}
.article-author-avatar{
  width:50px;
  height:50px;
  flex:0 0 50px;
  display:block;
}
.article-author-titles{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-height:50px;
}
.article-author-name{
  margin:0 !important;
}
.article-author-role{
  margin:2px 0 0 !important;
}
.article-author-bio{
  margin-top:18px !important;
}

/* Fred article hero artwork */
.article-hero-image{
  display:block;
  width:100%;
  height:auto;
}


/* =========================================================
   v30 — final EN corrections before bilingual structure
   ========================================================= */
/* ABOUT: lower information blocks sit directly on the grid, no panel fill. */
.v16-about .about-background,
.v16-about .about-copy-a,
.v16-about .about-copy-b{
  background:transparent !important;
}
/* CONTACT: the complete editorial directory follows the raised note block. */
.contact-grid .editorial-directory{
  transform:translateY(-400px) !important;
  margin-bottom:-400px !important;
}
/* Editorial section names: typographic only, no decorative quarter-round. */
.editorial-directory-label::after{display:none !important;content:none !important;}
.editorial-directory-label h2{
  font-size:34px !important;
  line-height:1.04 !important;
  font-weight:600 !important;
  max-width:11ch !important;
}


/* =========================================================
   v31 — French editorial formatting / article image refinements
   ========================================================= */
.fr-lead{font-weight:700 !important;}
.fr-subhead{font-weight:700 !important;font-size:1.16em !important;line-height:1.35 !important;margin-top:34px !important;margin-bottom:12px !important;}
.fr-question{font-weight:700 !important;font-size:1.10em !important;margin-top:28px !important;margin-bottom:10px !important;}
.fr-bold-italic{font-weight:700 !important;font-style:italic !important;}
.fr-italic{font-style:italic !important;}
.fr-black-italic{color:#111 !important;font-style:italic !important;font-weight:500 !important;}
.fr-black-heading{color:#111 !important;font-weight:700 !important;}
.fr-mini-heading{font-weight:700 !important;font-size:1.04em !important;margin-top:24px !important;margin-bottom:8px !important;}
.fred-aside{border-left:2px solid #777;padding-left:18px;margin-left:18px;font-weight:600;}
.article-inline-image{display:block;width:100%;height:auto;margin:34px 0 38px;}
.marketing-mix-graph{max-width:800px;}
.color-blind-test{max-width:800px;}
.compact-checklist{margin-top:8px !important;margin-bottom:28px !important;}

/* French home headline follows the footer wordmark logic. */
.home-headline strong,#headline strong{font-weight:800;color:#111;}
.home-headline span,#headline span{font-weight:600;color:#666;}

/* Contact editorial section titles: plain semi-bold and visibly larger. */
.editorial-directory-label h2{font-weight:600 !important;font-size:34px !important;}
\n/* v32 editable handwritten system */
.handwritten-blue,.editable-annotation,.sweet-svg text,.contact-hand-editable{font-family:"Caveat",cursive;color:#0A67FF}
.scribble-line,.sweet-blue path,.mind-stroke,.mind-outline{fill:none;stroke:#0A67FF;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.home-hover{font-family:"Caveat",cursive!important;color:#0A67FF!important;font-size:48px!important;line-height:.95!important;font-weight:600;white-space:normal!important;width:330px!important}
.home-hover.contact-size{width:460px!important}
.home-note{font-family:"Caveat",cursive!important;color:#0A67FF!important;font-size:38px!important;line-height:1!important;width:270px!important;font-weight:600;white-space:pre-line}
.editable-annotation{position:relative;color:#0A67FF;width:620px;min-height:240px;font-weight:600}
.unfinished-annotation .hand-head{font-size:55px;line-height:.95;width:580px;transform:rotate(-2deg)}
.unfinished-annotation svg{position:absolute;left:0;top:62px;width:520px;height:140px;overflow:visible}
.unfinished-annotation ul{list-style:none;margin:35px 0 0 305px;padding:0;width:310px;font-size:30px;line-height:1.05;transform:rotate(-2deg)}
.unfinished-annotation li{margin:7px 0}.unfinished-annotation li:before{content:'• ';}
.approach-sweet-spot .sweet-svg{width:100%;height:auto;display:block;overflow:visible}
.sweet-svg text{font-size:27px}.sweet-svg .sweet-black text{fill:#111;font-size:23px}.sweet-svg .sweet-blue text{fill:#0A67FF;font-size:34px;font-weight:600}.sweet-svg .sweet-center{fill:#111;font-family:"Caveat",cursive;font-size:42px;font-weight:600}
.contact-hand-editable{position:relative;width:370px;height:175px;font-size:39px;line-height:.92;font-weight:600;transform:rotate(-5deg)}
.contact-hand-editable svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.contact-hand-editable span{position:absolute;right:0;top:45px;width:270px}
.mindmap-stage{width:90%!important;margin:0 auto!important}.mindmap-editable{width:100%;aspect-ratio:1400/1086;display:block;overflow:visible}.mindmap-editable .hand{font-family:"Caveat",cursive;font-weight:600}.mindmap-editable .blue{fill:#0A67FF}.mindmap-editable .black{fill:#111}.mind-fill{fill:#f4f4f4;stroke:none}.mind-outline{stroke-width:3.2}.mindmap-editable .draw{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900)}.mindmap-editable .reveal{opacity:0;transform-box:fill-box;transform-origin:center}.mindmap-editable.play .draw{animation:mindDraw .56s cubic-bezier(.25,.65,.25,1) forwards;animation-delay:var(--delay,0s)}.mindmap-editable.play .reveal{animation:mindWrite .30s cubic-bezier(.2,.75,.25,1) forwards;animation-delay:var(--delay,0s)}@keyframes mindDraw{to{stroke-dashoffset:0}}@keyframes mindWrite{from{opacity:0;transform:translate(-4px,3px) rotate(-1deg)}to{opacity:1;transform:none}}
/* pending positioning / about corrections */
.v16-about .about-copy-a,.v16-about .about-copy-b{background:transparent!important}.v16-about .about-background{grid-column:1 / span 6!important;background:transparent!important}.v16-about .about-background .eyebrow{font-size:clamp(23px,2vw,32px)!important;font-weight:600!important;color:#111!important;letter-spacing:0!important;text-transform:none!important}.v16-about .about-quote{grid-column:1 / span 5!important}.contact-note{transform:translate(400px,-200px)!important}.contact-hand-v21{position:absolute!important;left:calc(100% + 10px)!important;top:-74px!important;width:370px!important}.editorial-directory{transform:translateY(-400px)}
@media(max-width:900px){.editable-annotation{width:100%;transform:scale(.75);transform-origin:top left}.contact-note,.editorial-directory{transform:none!important}.mindmap-stage{width:100%!important}}

/* v33 live-test refinements */
.work-archive-label{transform:translateY(100px)!important;}
.work-hero .hero-detail,.work-hero .work-sub{max-width:300px!important;}
.v16-approach .reverse-diagram{transform:translateY(-250px)!important;margin-bottom:-250px!important;}
.unfinished-annotation .hand-head u{
  text-decoration-thickness:2px;
  text-underline-offset:5px;
  text-decoration-color:#0A67FF;
}
.home-hover{color:#c4ddff!important;}

/* Contact form delivery status / honeypot */
.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;}
.form-status{margin:14px 0 0;font-size:15px;line-height:1.35;max-width:300px;}
.form-status.is-success{color:#d9ffd9;}
.form-status.is-error{color:#ffd2d2;}