/* ==========================================================================
   Fashion Brand Lab — Full Conversion Audit service page
   Page-specific components only. The visual system lives in styles.css.
   ========================================================================== */

/* --------------------------------------------------------- audit hero --- */
.ah{position:relative;padding:126px 0 clamp(48px,5.6vw,84px);overflow:hidden;}
.ah-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  background-size:52px 52px;opacity:.55;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 92%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 92%);}
.ah-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(28px,4vw,64px);align-items:end;}
.ah-folio{display:flex;justify-content:space-between;gap:16px;font-size:10px;letter-spacing:.21em;
  text-transform:uppercase;color:var(--ink-faint);border-top:1px solid var(--ink);
  padding-top:10px;margin-bottom:clamp(22px,2.4vw,32px);}
.ah-folio .r{color:var(--ox);}
h1.ah-head{font-size:clamp(2.3rem,5vw,4.4rem);}
h1.ah-head .l{display:block;}
h1.ah-head .accent{display:block;color:var(--ox);font-size:1.13em;line-height:.9;margin:.01em 0 .02em -.014em;}
.ah-lede{margin:clamp(20px,2.3vw,28px) 0 0;max-width:48ch;font-size:clamp(15px,1.15vw,16.8px);
  color:var(--ink-soft);line-height:1.62;}
.ah-lede b{color:var(--ink);font-weight:600;}
.ah-cta{display:flex;flex-wrap:wrap;gap:11px;margin:clamp(22px,2.4vw,30px) 0 0;}

.spec{background:var(--paper);border:1px solid var(--ink);padding:clamp(20px,2vw,28px);}
.spec-h{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:600;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:4px;}
.spec dl{margin:0;}
.spec dl > div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line-soft);}
.spec dl > div:last-child{border-bottom:0;padding-bottom:0;}
.spec dt{font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-faint);
  flex:0 0 auto;}
.spec dd{margin:0;font-size:13px;font-weight:600;text-align:right;line-height:1.4;}
.spec dd.big{font-family:'Archivo Black',sans-serif;font-size:26px;letter-spacing:-.03em;font-weight:400;}

/* ------------------------------------------------------- journey tiles -- */
.jr{margin-top:clamp(34px,3.8vw,56px);display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line);border-top:1px solid var(--ink);border-bottom:1px solid var(--line);}
.jr-i{background:var(--shell);padding:clamp(22px,2.2vw,30px) clamp(16px,1.7vw,24px)
  clamp(24px,2.4vw,34px);}
.jr-ic{display:block;width:clamp(42px,4.1vw,56px);height:auto;color:var(--ox);
  fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:square;stroke-linejoin:miter;
  margin-bottom:clamp(20px,2.2vw,30px);}
.jr-i .n{font-size:9px;letter-spacing:.2em;color:var(--ink-faint);font-weight:600;}
.jr-i h3{font-size:clamp(1rem,1.35vw,1.14rem);margin:7px 0 7px;}
.jr-i p{margin:0;font-size:12.6px;color:var(--ink-soft);line-height:1.6;}

/* --------------------------------------------------------- deliverable -- */
.sec--dark{background:var(--ink);color:#fff;}
.sec--dark .kicker{color:rgba(255,255,255,.48);}
.sec--dark .kicker .n{color:var(--ox-light);}
.sec--dark h2{color:#fff;}
.sec--dark .sub{color:rgba(255,255,255,.7);}
.dl{margin-top:clamp(34px,3.8vw,56px);}
.dl-p{margin:0;}
.dl-p + .dl-p{margin-top:clamp(34px,4vw,62px);}
.dl-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:14px 26px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.2);}
.dl-n{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ox-light);font-weight:600;}
.dl-h h3{margin:7px 0 0;font-size:clamp(1.05rem,1.7vw,1.42rem);color:#fff;}
.dl-chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip{font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.26);padding:6px 10px;}
.dl-scroll{border:1px solid rgba(255,255,255,.18);}
.dl-p img{width:100%;}
.dl-hint{display:none;margin-top:9px;font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(255,255,255,.42);}
.dl-p figcaption{margin-top:13px;font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.6;
  border-left:2px solid var(--ox-light);padding-left:13px;max-width:70ch;}
.dv-note{margin-top:clamp(26px,2.8vw,40px);font-size:11.5px;color:rgba(255,255,255,.46);
  border-left:2px solid rgba(255,255,255,.2);padding-left:14px;max-width:84ch;line-height:1.65;}

/* ---------------------------------------------------------------- how --- */
.hw{margin-top:clamp(30px,3.4vw,50px);display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);border-top:1px solid var(--ink);border-bottom:1px solid var(--line);}
.hw-i{background:var(--shell);padding:clamp(22px,2.3vw,32px) clamp(18px,1.9vw,26px);}
.hw-i .n{font-family:'Archivo Black',sans-serif;font-size:11px;color:var(--ox);}
.hw-i h3{font-size:clamp(1.02rem,1.5vw,1.26rem);margin:9px 0 8px;}
.hw-i p{font-size:13.2px;color:var(--ink-soft);line-height:1.62;}
.hw-i .t{display:inline-block;margin-top:12px;font-size:9px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--line);padding:5px 9px;}

/* -------------------------------------------------------------- ladder -- */
.lad{margin-top:clamp(32px,3.6vw,52px);display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  align-items:stretch;gap:clamp(10px,1.4vw,20px);}
.lad-i{background:var(--paper);border:1px solid var(--ink);padding:clamp(20px,2.1vw,28px);
  display:flex;flex-direction:column;}
.lad-i--this{background:var(--ink);color:#fff;}
.lad-tag{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;}
.lad-i--this .lad-tag{color:var(--ox-light);}
.lad-verb{font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:-.02em;font-size:clamp(1.35rem,2.3vw,2rem);line-height:1;
  color:var(--ox);margin:14px 0 0;}
.lad-i--this .lad-verb{color:var(--blush);}
.lad-p{font-family:'Archivo Black',sans-serif;font-size:clamp(1rem,1.4vw,1.22rem);
  letter-spacing:-.025em;margin:10px 0 0;padding-top:12px;border-top:1px solid var(--line);}
.lad-i--this .lad-p{border-top-color:rgba(255,255,255,.26);}
.lad-i h3{font-size:13.5px;font-weight:600;margin:12px 0 6px;}
.lad-i p{margin:0;font-size:12.6px;color:var(--ink-soft);line-height:1.6;}
.lad-i--this p{color:rgba(255,255,255,.75);}
.lad-ar{align-self:center;color:var(--ink-faint);font-size:15px;line-height:1;}
.tr-note{margin-top:20px;font-size:13px;color:var(--ink-soft);max-width:72ch;}
.tr-note a{color:var(--ox);border-bottom:1px solid rgba(110,34,48,.38);font-weight:500;}

/* ---------------------------------------------------------- final cta --- */
.fc-meta{display:flex;flex-wrap:wrap;gap:14px 58px;margin:clamp(26px,2.8vw,36px) 0 0;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.24);}
.fc-meta div{min-width:166px;}
.fc-meta dt{font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.fc-meta dd{margin:6px 0 0;font-family:'Archivo Black',sans-serif;font-size:19px;letter-spacing:-.025em;}
.fc-meta dd.sm{font-family:'Sora',sans-serif;font-size:14px;font-weight:600;letter-spacing:0;}
.fc-fine{margin-top:22px;font-size:12px;color:rgba(255,255,255,.55);max-width:60ch;}

/* ------------------------------------------------------------ tablet ---- */
@media (max-width:1080px){
  .ah-inner{grid-template-columns:1fr;align-items:start;}
  .spec{max-width:430px;}
  .jr{grid-template-columns:repeat(2,1fr);}
  .lad{grid-template-columns:1fr;gap:12px;}
  .lad-ar{display:none;}
  .lad-i{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
    gap:8px clamp(18px,3vw,40px);align-items:start;}
  .lad-tag{grid-column:1;}
  .lad-verb{grid-column:1;margin:8px 0 0;}
  .lad-p{grid-column:1;margin:10px 0 0;}
  .lad-i h3{grid-column:2;grid-row:1/3;margin:0;font-size:15px;align-self:center;}
  .lad-i p{grid-column:2;}
}

/* ------------------------------------------------------------ mobile ---- */
@media (max-width:760px){
  .ah{padding-top:108px;}
  .ah-folio{flex-direction:column;gap:5px;}
  h1.ah-head{font-size:clamp(2rem,10vw,3.3rem);}
  .ah-cta .btn{flex:1 1 100%;justify-content:center;}
  .spec{max-width:none;}
  .jr-ic{margin-bottom:16px;}
  .dl-h{display:block;}
  .dl-chips{margin-top:13px;}
  .dl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .dl-scroll img{width:196%;max-width:none;}
  .dl-hint{display:block;}
  .hw{grid-template-columns:1fr;}
  .lad-i{display:flex;align-items:stretch;}
  .lad-i h3{margin:12px 0 6px;font-size:13.5px;align-self:stretch;}
  .fc-meta{gap:16px;}
  .fc-meta div{min-width:0;flex:1 1 100%;display:flex;align-items:baseline;
    justify-content:space-between;gap:16px;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:12px;}
  .fc-meta dd{margin:0;}
}