/* ===========================================================
   web-design-hub.css: /services/web-design/, the demo hub.
   From WebDesign_Mockup_Step2.html (approved Step 2). Scoped to
   main.wdh so nothing leaks into other pages. Demo stills and the
   popup: css/demo-popup.css. Tokens only.
   =========================================================== */

/* Metric-matched fallback while Archivo loads: Arial scaled to Archivo's measured widths
   (0.89 at 700 to 900, 0.985 below), so headings wrap the same before and after the swap
   and the centred hero preview does not jump (Lighthouse CLS). Pages here only. */
@font-face { font-family: 'Archivo Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 700 900; size-adjust: 89%; }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 100 600; size-adjust: 98.5%; }

.wdh { --font-sans: 'Archivo', 'Archivo Fallback', system-ui, -apple-system, sans-serif; font-family: var(--font-sans);
       padding-top: var(--nav-height); background: var(--bone); color: var(--gray-deep); }
/* The site container, as on the reference pages (01_Addendum_Container_Width): --container-max
   inside --section-pad-x, plus the 40px left inset that drops to 0 at <=768px. Same rule as .sa .wrap.
   Never the mockups' 1184px .wrap. */
.wdh .wrap { max-width: calc(var(--container-max) + 2 * var(--section-pad-x)); margin: 0 auto;
             padding: 0 var(--section-pad-x) 0 calc(var(--section-pad-x) + 40px); }
.wdh p { font-size: 16px; line-height: 1.62; color: var(--gray); max-width: 62ch; }
.wdh .lab { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--orange-text); }
.wdh h2 { font-weight: 800; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.02; letter-spacing: -.035em; color: var(--gray-deep); }

/* breadcrumb */
.wdh .crumb { border-bottom: 1px solid var(--rule); }
.wdh .crumb ol { list-style: none; margin: 0 auto; max-width: calc(var(--container-max) + 2 * var(--section-pad-x)); padding: 14px var(--section-pad-x) 14px calc(var(--section-pad-x) + 40px); display: flex; flex-wrap: wrap;
                 font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--gray-soft); }
.wdh .crumb li:not(:last-child)::after { content: '>'; margin: 0 .7em; color: var(--gray-soft); }
.wdh .crumb a { color: var(--gray); text-decoration: none; border-bottom: 1px solid var(--field-line-dark); }
.wdh .crumb a:hover { color: var(--ink); }

/* buttons: ink on orange, offset border */
.wdh .wdh-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--orange); color: var(--on-orange); font-family: var(--font-sans);
                font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 18px 26px; min-height: 48px;
                border: none; cursor: pointer; text-decoration: none; position: relative; }
.wdh .wdh-btn::after { content: ''; position: absolute; inset: 0; transform: translate(6px, 6px); border: 1px solid var(--gray-deep); transition: transform .3s var(--ease-out); pointer-events: none; }
.wdh .wdh-btn:hover::after { transform: none; }
.wdh .dark .wdh-btn::after { border-color: var(--on-dark-muted); }

/* hero */
.wdh .hero { padding: 40px 0 104px; position: relative; overflow: hidden; }
.wdh .hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: linear-gradient(var(--wdh-grid) 1px, transparent 1px), linear-gradient(90deg, var(--wdh-grid) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 75%); mask-image: linear-gradient(90deg, transparent 30%, #000 75%); }
.wdh .hero .wrap { position: relative; display: grid; grid-template-columns: 1fr 1.08fr; gap: 56px; align-items: center; }
.wdh .eye { font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gray);
            display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.wdh .eye::before { content: ''; width: 30px; height: 1px; background: var(--orange-deep); }
.wdh h1 { font-weight: 800; font-size: clamp(44px, 5.8vw, 84px); line-height: .94; letter-spacing: -.045em; color: var(--gray-deep); margin-bottom: 28px; }
.wdh h1 em { font-style: normal; color: var(--orange-deep); }
.wdh .sub { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--gray); max-width: 44ch; }
.wdh .hero .wdh-btn { margin-top: 36px; }
.wdh .under { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 16px; }
.wdh .under .lab { color: var(--gray); }
.wdh .tl { font-weight: 700; font-size: 14px; text-decoration: none; border-bottom: 2px solid var(--orange-deep); padding: 6px 0; color: var(--gray-deep); min-height: 44px; display: inline-flex; align-items: center; }

/* hero live preview (the one live demo on load) */
.wdh .pv-frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--demo01-ground); }
.wdh .pv-frame iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0; transform-origin: 0 0; pointer-events: none; opacity: 0; }
.wdh .pv-frame.pv-live iframe { opacity: 1; }
.wdh .pv-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wdh .pv-frame.pv-live .pv-still { visibility: hidden; }
.wdh .pv-open { position: absolute; inset: 0; background: transparent; border: 0; cursor: pointer; z-index: 2; }
.wdh .pv-open:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: -2px; }
.wdh .pv-tap { display: none; z-index: 3; pointer-events: none; }
.wdh .pz { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-mono); font-size: 10px;
           letter-spacing: .14em; text-transform: uppercase; color: var(--wdh-chrome-tx); background: var(--wdh-chrome-2); border: 1px solid var(--wdh-chrome-line);
           padding: 0 10px; height: 26px; min-width: 44px; border-radius: 4px; cursor: pointer; }
.wdh .pz[hidden] { display: none; }
.wdh .pz svg { width: 9px; height: 9px; }
.wdh .pz:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* demos intro */
.wdh .demos-intro { padding: 88px 0 72px; background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.wdh .demos-intro .wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: end; }
.wdh .demos-intro p { font-size: 18px; }

/* demo sections: alternating bone / paper, identical layout */
.wdh .demo-sec { padding: 96px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: var(--nav-height); }
.wdh .demo-sec.bone { background: var(--bone); }
.wdh .demo-sec.paper { background: var(--paper); }
.wdh .demo-sec .wrap { display: grid; grid-template-columns: .8fr 1.4fr; gap: 56px; align-items: center; }
.wdh .demo-sec .lab { display: block; margin-bottom: 18px; }
.wdh .demo-sec .line { font-size: clamp(20px, 2vw, 26px); font-weight: 600; line-height: 1.35; letter-spacing: -.015em; color: var(--gray-deep); max-width: 30ch; }
.wdh .demo-sec .line a { color: var(--gray-deep); text-decoration: underline; text-decoration-color: var(--orange-deep); text-decoration-thickness: 2px;
                         text-underline-offset: 5px; }
.wdh .demo-sec .line a:hover { color: var(--ink); }

/* what we do */
.wdh .wwd { padding: 104px 0; }
.wdh .wwd-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 44px; gap: 24px; }
.wdh .wwd-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--gray-deep); }
.wdh .wwd-item { padding: 34px 34px 38px 0; border-bottom: 1px solid var(--rule); }
.wdh .wwd-item:nth-child(odd) { padding-right: 48px; border-right: 1px solid var(--rule); }
.wdh .wwd-item:nth-child(even) { padding-left: 48px; }
.wdh .wwd-item .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--orange-text); font-weight: 600; display: block; margin-bottom: 18px; }
.wdh .wwd-item h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: var(--gray-deep); margin-bottom: 12px; }

/* approach */
.wdh .appr { padding: 112px 0; background: var(--bone-deep); }
.wdh .appr .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.wdh .appr h2.lab { margin-bottom: 22px; font-size: 11px; letter-spacing: .2em; line-height: 1.4; }
.wdh .pull { max-width: none; font-weight: 800; font-size: clamp(30px, 3.8vw, 52px); line-height: 1.04; letter-spacing: -.035em; color: var(--gray-deep); }
.wdh .pull em { font-style: normal; color: var(--orange-deep); }
.wdh .appr p:not(.pull) { font-size: 18px; line-height: 1.65; }

/* how it runs */
.wdh .proc { padding: 104px 0; }
.wdh .steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 44px; border-top: 1px solid var(--gray-deep); padding: 0; }
.wdh .steps li { padding: 30px 28px 10px 0; }
.wdh .steps li + li { padding-left: 28px; border-left: 1px solid var(--rule); }
.wdh .steps .n { font-family: var(--font-mono); font-size: 44px; font-weight: 500; letter-spacing: -.04em; color: var(--orange-deep); display: block; margin-bottom: 18px; line-height: 1; }
.wdh .steps h3 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; color: var(--gray-deep); }
.wdh .steps p { font-size: 15px; }

/* close band */
.wdh .dark { background: var(--ink); color: var(--wdh-chrome-tx); }
.wdh .close { padding: 104px 0; text-align: center; scroll-margin-top: var(--nav-height); }
.wdh .close h2 { color: var(--wdh-chrome-tx); max-width: 24ch; margin: 0 auto 34px; }
.wdh .close h2 span { display: block; color: var(--on-dark-muted); font-weight: 500; }
.wdh .dark :focus-visible { outline-color: var(--orange); }

/* the container's left inset goes at the site breakpoint, with --section-pad-x */
@media (max-width: 768px) {
  .wdh .wrap { padding-left: var(--section-pad-x); }
  .wdh .crumb ol { padding-left: var(--section-pad-x); }
}

/* mobile */
@media (max-width: 760px) {
  .wdh .hero { padding: 24px 0 64px; }
  .wdh .hero .wrap, .wdh .demos-intro .wrap, .wdh .appr .wrap, .wdh .demo-sec .wrap { grid-template-columns: 1fr; gap: 36px; }
  .wdh .hero::before { -webkit-mask-image: linear-gradient(180deg, transparent 45%, #000); mask-image: linear-gradient(180deg, transparent 45%, #000); }
  .wdh .under { flex-direction: column; align-items: flex-start; gap: 6px; }
  .wdh .demos-intro { padding: 60px 0; }
  .wdh .demo-sec { padding: 64px 0; }
  .wdh .demo-sec .wrap { gap: 28px; }
  .wdh .wwd, .wdh .appr, .wdh .proc, .wdh .close { padding: 64px 0; }
  .wdh .wwd-head { flex-direction: column; align-items: flex-start; }
  .wdh .wwd-grid { grid-template-columns: 1fr; }
  .wdh .wwd-item, .wdh .wwd-item:nth-child(odd), .wdh .wwd-item:nth-child(even) { padding: 26px 0; border-right: none; }
  .wdh .steps { grid-template-columns: 1fr; }
  .wdh .steps li, .wdh .steps li + li { padding: 24px 0; border-left: none; border-bottom: 1px solid var(--rule); }
  /* mobile: no iframe; the captured still with a tap affordance */
  .wdh .pv-frame iframe { display: none; }
  .wdh .pv-frame .pv-still { visibility: visible; }
  .wdh .pv-tap { display: inline-flex; }
  .wdh .pz { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wdh .wdh-btn::after { transition: none; }
}