/* ======================================================================
   ALGARVE MARKETING TEAM - one-page mockup
   Look and palette unchanged from round 1: pink-dominant, blue as ink,
   tokens inherited from site/styles.css so it sits in the ACC family.
   Round 3 changes are CONTENT only, plus the real logo.
   Single file on purpose. No backend.
   ====================================================================== */
:root{
  --blue:#19196F;          /* ACC royal/navy, the ink */
  --blue-soft:#3a3a9c;
  --pink:#F7C9C9;          /* ACC pink, the dominant field */
  --pink-deep:#EFA9A9;
  --pink-pale:#FDEEEE;
  --grey:#ededed;
  --card:#fff;
  --ink:#1b2a45;
  --mut:#5d6a82;
  --line:#e3c9c9;
  --navh:88px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--pink-pale);font-family:'Jost',system-ui,sans-serif;color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 36px}
h1,h2,h3{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.5px;line-height:1;color:var(--blue)}
.eyebrow{font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:2px;font-size:11px;font-weight:700;color:var(--blue);opacity:.75}
.lede{font-size:17px;color:#33335f}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Archivo',sans-serif;font-weight:800;font-size:13px;letter-spacing:.3px;text-transform:uppercase;padding:15px 28px;border-radius:8px;cursor:pointer;border:none;transition:.18s;white-space:nowrap}
.btn.blue{background:var(--blue);color:#fff}
.btn.blue:hover{background:var(--blue-soft)}
.btn.light{background:#fff;color:var(--blue)}
.btn.light:hover{background:var(--pink)}
.btn.pink{background:var(--pink);color:var(--blue)}
.btn.pink:hover{background:#fff}
.btn.ghost{background:transparent;border:2px solid var(--blue);color:var(--blue)}
.btn.ghost:hover{background:var(--blue);color:#fff}

/* --- mockup notice, delete before this goes anywhere --- */
.draftbar{background:var(--blue);color:#fff;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;text-align:center;padding:8px 16px}
.draftbar b{color:var(--pink)}

/* --- header --- */
header{position:sticky;top:0;z-index:60;height:var(--navh);background:var(--pink);border-bottom:2px solid var(--blue)}
.nav{display:flex;align-items:center;justify-content:space-between;height:100%;gap:20px}
.nav nav{display:flex;gap:22px;align-items:center;font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--blue)}
.nav nav a:not(.btn):hover{opacity:.6}
.logomark{height:58px;width:auto}

/* --- hero --- */
.hero{background:var(--pink);padding:74px 0 84px;position:relative;overflow:hidden;border-bottom:2px solid var(--blue)}
.hero::after{content:"";position:absolute;right:-160px;top:-160px;width:520px;height:520px;border-radius:50%;background:var(--pink-deep);opacity:.55}
.hero .grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(48px,8vw,104px);line-height:.92}
.hero h1 em{font-style:normal;color:#fff;-webkit-text-stroke:2.5px var(--blue);paint-order:stroke fill}
.hero h1 em.trio{display:block;font-size:clamp(21px,3.7vw,47px);line-height:1.06;letter-spacing:.5px;margin-top:.12em;-webkit-text-stroke-width:2px}
.hero .lede{margin:24px 0 30px;font-size:18px;max-width:46ch;color:#2a2a5e}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .under{margin-top:20px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--blue);opacity:.7}
.jobs{background:#fff;border:2px solid var(--blue);border-radius:18px;padding:28px 30px;box-shadow:10px 10px 0 var(--blue)}
.jobs h3{font-size:15px;letter-spacing:1.4px;margin-bottom:18px}
.jobs ol{list-style:none;display:flex;flex-direction:column;gap:16px}
.jobs li{display:flex;gap:14px;align-items:flex-start}
.jobs .n{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;color:var(--blue);background:var(--pink);border-radius:6px;padding:5px 8px;flex:0 0 auto}
.jobs .t{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;font-size:19px;color:var(--blue);line-height:1.1}
.jobs .d{font-size:14px;color:var(--mut);margin-top:4px}

/* --- stat strip --- */
.stats{background:var(--pink-pale);border-bottom:2px solid var(--blue);padding:52px 0}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:0 26px;border-left:2px solid var(--blue)}
.stat:first-child{padding-left:0;border-left:none}
.stat .n{font-family:'Anton',sans-serif;font-size:clamp(38px,5vw,66px);line-height:.9;color:var(--blue);text-transform:uppercase}
.stat .n small{font-size:.44em;vertical-align:super;color:var(--pink-deep)}
.stat .l{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut);margin-top:12px;line-height:1.55}
.statnote{margin-top:26px;font-size:15px;color:var(--mut);max-width:70ch}

/* --- the three outcomes band --- */
.jobband{background:var(--pink-pale);border-bottom:2px solid var(--blue);padding:58px 0}
.jobband .big{list-style:none;margin-top:16px}
.jobband .big li{display:flex;align-items:baseline;gap:clamp(10px,1.6vw,22px);font-family:'Montserrat',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(38px,9vw,104px);line-height:1.02;letter-spacing:.5px;color:#fff;-webkit-text-stroke:2.5px var(--blue);paint-order:stroke fill;white-space:nowrap}
.jobband .big li .n{font-family:'Space Mono',monospace;font-weight:700;font-size:clamp(11px,1.1vw,14px);letter-spacing:1.5px;color:var(--blue);-webkit-text-stroke:0;flex:0 0 auto;opacity:.55;transform:translateY(-.6em)}
.jobband .note{margin-top:26px;max-width:64ch;font-size:16.5px;color:#3b3b74}

/* --- sections --- */
.sec{padding:72px 0}
.sec.pink{background:var(--pink);border-top:2px solid var(--blue);border-bottom:2px solid var(--blue)}
.sechead{margin-bottom:38px;max-width:62ch}
.sechead h2{font-size:clamp(32px,5vw,56px)}
.sechead .lede{margin-top:18px;font-size:16.5px}
.secno{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--blue);opacity:.6;margin-bottom:14px}

/* --- card grids, shared idiom --- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cards.two{grid-template-columns:1fr 1fr}
.card{background:#fff;border:2px solid var(--blue);border-radius:16px;padding:28px;transition:.18s}
.card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--blue)}
.card .n{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);opacity:.6}
.card h3{font-size:21px;margin:10px 0 11px;line-height:1.15}
.card p{font-size:15px;color:var(--mut)}
.card p+p{margin-top:10px}
.card .job{display:inline-block;margin-top:15px;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--blue);background:var(--pink);border-radius:20px;padding:6px 12px}

/* --- blue feature section, same idiom as ACC's navy bands --- */
.bluesec{background:var(--blue);color:#fff;padding:74px 0}
.bluesec h2,.bluesec h3{color:#fff}
.bluesec .secno,.bluesec .eyebrow{color:var(--pink);opacity:1}
.bluesec .lede{color:#d6d6f0}
.bluesec .grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.reachlist{display:flex;flex-direction:column}
.reachlist .r{display:flex;align-items:baseline;gap:20px;border-top:1px solid rgba(247,201,201,.3);padding:20px 0}
.reachlist .r:last-child{border-bottom:1px solid rgba(247,201,201,.3)}
.reachlist .r .n{font-family:'Anton',sans-serif;font-size:clamp(32px,4.2vw,54px);line-height:.9;color:var(--pink);flex:0 0 auto;min-width:4.4em;text-transform:uppercase}
.reachlist .r .t{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.5px;color:#fff}
.reachlist .r .d{font-size:13.5px;color:#c3c3e4;margin-top:4px}
.geo{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.geo span{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.8px;color:var(--pink);border:1.5px solid rgba(247,201,201,.45);border-radius:24px;padding:8px 15px}

/* --- split with pull quote --- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
.split .body p{font-size:16.5px;color:#33335f}
.split .body p+p{margin-top:15px}
.pull{background:var(--blue);color:#fff;border-radius:18px;padding:32px 34px}
.pull .big{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(21px,2.6vw,29px);line-height:1.1;color:var(--pink)}
.pull p{margin-top:15px;font-size:15px;color:#d6d6f0}

/* --- ACC case study --- */
/* --- instagram-style post cards. Images are cropped to 1080x1350,
       the standard Instagram portrait feed ratio (4:5). --- */
.showgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.igpost{background:#fff;border:2px solid var(--blue);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:.18s}
.igpost:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--blue)}
.ighead{display:flex;align-items:center;gap:9px;padding:9px 11px;border-bottom:1.5px solid var(--line)}
.ighead .av{width:30px;height:30px;border-radius:50%;background:var(--pink);border:1.5px solid var(--blue);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.ighead .av img{width:118%;height:auto;max-width:none}
.ighead .hd{font-family:'Montserrat',sans-serif;font-weight:800;font-size:11px;letter-spacing:.3px;color:var(--blue);line-height:1.25}
.ighead .hd span{display:block;font-family:'Space Mono',monospace;font-weight:400;font-size:9px;letter-spacing:.6px;color:var(--mut);text-transform:none}
.igpost .shot{aspect-ratio:4/5;overflow:hidden;background:var(--pink)}
.igpost .shot img{width:100%;height:100%;object-fit:cover}
.igfoot{padding:9px 11px 11px;display:flex;align-items:center;gap:8px}
.igfoot svg{width:15px;height:15px;fill:none;stroke:var(--blue);stroke-width:1.9}
.igfoot .cap{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.7px;text-transform:uppercase;color:var(--mut);margin-left:auto}
.revs{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.rev{background:#fff;border:2px solid var(--blue);border-radius:14px;padding:20px 22px}
.rev .stars{color:var(--pink-deep);letter-spacing:2px;font-size:14px}
.rev p{font-size:15px;color:var(--ink);margin:9px 0 12px;font-style:italic}
.rev .by{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--mut)}

/* --- operators --- */
.op{padding:0;overflow:hidden;display:flex;flex-direction:column}
.op .shot{aspect-ratio:4/5;overflow:hidden;background:var(--pink);border-bottom:2px solid var(--blue)}
.op .shot img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.op .txt{padding:26px 28px 30px}
.op ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:4px}
.op li{font-size:14.5px;color:var(--mut);display:flex;gap:11px}
.op li::before{content:"\25B8";color:var(--blue);flex:0 0 auto}
.op .role{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);opacity:.7}
.op h3{font-size:34px;margin:9px 0 14px}
.op:hover{transform:none;box-shadow:9px 9px 0 var(--blue)}

/* --- backed by DTC Mode --- */
.backed{background:#fff;border-top:2px solid var(--blue);border-bottom:2px solid var(--blue);padding:44px 0}
.backed .row{display:grid;grid-template-columns:auto 1fr auto;gap:38px;align-items:center}
/* DTC Mode yellow is #F8F32A from their brand book, brown mark #221A18.
   Panel padding respects the "clear space = height of the D" rule. */
.backed .mark{background:#F8F32A;border:2px solid var(--blue);border-radius:14px;padding:26px 30px;width:262px;flex:0 0 auto}
.backed .mark img{width:100%;height:auto}
.backed .k{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--blue);opacity:.7;margin-bottom:9px}
.backed p{font-size:15.5px;color:#33335f;max-width:62ch}
.logoslot{border:2px dashed var(--blue);border-radius:12px;padding:24px 30px;text-align:center;background:repeating-linear-gradient(45deg,#f6e2e2,#f6e2e2 12px,#f0d4d4 12px,#f0d4d4 24px);font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--blue);line-height:1.7;min-width:230px}

/* --- client strip --- */
.clients{background:#fff;border-bottom:2px solid var(--blue);padding:46px 0}
.clients .k{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--blue);opacity:.65;text-align:center;margin-bottom:26px}
.clogos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:2px solid var(--blue);border-radius:16px;overflow:hidden}
.logostrip{border:2px solid var(--blue);border-radius:16px;background:#fff;padding:26px 30px;margin-bottom:16px}
.logostrip img{width:100%;height:auto}
.clogo{background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:18px 16px 22px;transition:.16s}
.clogo:hover{background:var(--pink-pale)}
.clogo .pic{width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--pink-pale);border:1.5px solid var(--line);margin-bottom:12px;display:block}
.clogo .pic img{width:100%;height:100%;object-fit:cover;display:block}
.clogo .wm{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;font-size:19px;letter-spacing:1.5px;color:var(--blue);line-height:1.15}
.clogo .cat{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut);margin-top:8px}
.clients .note{text-align:center;margin-top:22px;font-size:14.5px;color:var(--mut)}

/* --- video ---
   Click-to-play facade. YouTube returns "Error 153" when an iframe is
   embedded from a file:// page, because there is no origin for it to
   check. Showing the thumbnail first means the mockup looks right
   locally, and the real player loads on click and once this is hosted. */
.vidwrap{margin-top:30px}
.vidwrap iframe{width:100%;aspect-ratio:16/9;border:2px solid var(--pink);border-radius:16px;display:block}
.vidfacade{position:relative;display:block;aspect-ratio:16/9;border:2px solid var(--pink);border-radius:16px;overflow:hidden;background:#111;cursor:pointer}
.vidfacade img{width:100%;height:100%;object-fit:cover}
.vidfacade .pbtn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vidfacade .pbtn i{width:80px;height:80px;border-radius:50%;background:var(--pink);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 34px rgba(0,0,0,.45);transition:.18s}
.vidfacade:hover .pbtn i{transform:scale(1.08)}
.vidfacade .pbtn svg{width:28px;height:28px;fill:var(--blue);margin-left:5px}
.vidcap{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--pink);opacity:.85;margin-top:12px}

/* --- youtube channel card, sits in the blue band --- */
.ytcard{display:flex;align-items:center;gap:18px;border:1.5px solid rgba(247,201,201,.45);border-radius:14px;padding:18px 22px;margin-top:28px;transition:.18s}
.ytcard:hover{background:rgba(247,201,201,.12)}
.ytcard .play{width:46px;height:46px;border-radius:50%;background:var(--pink);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ytcard .play svg{width:17px;height:17px;fill:var(--blue);margin-left:3px}
.ytcard .t{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.5px;color:#fff}
.ytcard .d{font-size:13.5px;color:#c3c3e4;margin-top:3px}
.ytcard .go{margin-left:auto;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--pink);flex:0 0 auto}

/* --- about us --- */
.about .split{margin-bottom:34px}

/* --- steps --- */
.step .n{font-family:'Anton',sans-serif;font-size:48px;line-height:1;color:var(--pink-deep)}
.step h3{font-size:19px;margin:6px 0 10px}
.step p{font-size:14.5px;color:var(--mut)}

/* --- who for --- */
.forwho{display:flex;flex-wrap:wrap;gap:10px}
.forwho span{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;font-size:12.5px;letter-spacing:.7px;color:var(--blue);background:#fff;border:2px solid var(--blue);border-radius:24px;padding:10px 17px}

/* --- placeholders, ACC convention --- */
.ph{position:relative;background:repeating-linear-gradient(45deg,#f6e2e2,#f6e2e2 12px,#f0d4d4 12px,#f0d4d4 24px);border:2px dashed var(--blue);border-radius:16px;display:flex;align-items:center;justify-content:center;min-height:220px}
.ph::after{content:"placeholder";position:absolute;top:10px;left:10px;background:#ffd400;color:#1b2a45;font-family:'Space Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:4px 8px;border-radius:5px}
.ph .cap{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--blue);opacity:.62;text-align:center;padding:26px;line-height:1.75}
.tofill{background:#ffd400;color:#1b2a45;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;padding:2px 6px;border-radius:4px}

/* --- contact --- */
.contact{background:var(--pink);border-top:2px solid var(--blue);padding:78px 0}
.contact .grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:50px;align-items:start}
.contact h2{font-size:clamp(32px,5vw,56px)}
.contact .lede{margin:16px 0 0;max-width:38ch;color:#2a2a5e}
.contact .assure{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px;color:#33335f;margin-top:22px}
.contact .assure li::before{content:"\2713";color:var(--blue);font-weight:700;margin-right:10px}
form{background:#fff;border:2px solid var(--blue);border-radius:18px;padding:30px;box-shadow:10px 10px 0 var(--blue)}
form h3{font-size:23px;margin-bottom:18px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1/-1}
.field label{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--mut)}
.field input,.field select,.field textarea{width:100%;padding:12px;border:1.5px solid var(--line);border-radius:9px;background:#fff;font-family:inherit;font-size:14px;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{display:flex;align-items:center;gap:7px;font-size:13px;border:1.5px solid var(--line);border-radius:22px;padding:8px 13px;cursor:pointer}
.chips label:hover{border-color:var(--blue)}
.done{display:none;background:var(--blue);color:#fff;padding:13px;border-radius:9px;font-size:13.5px;margin-top:12px}
form.sent .done{display:block}

/* --- closing cta band --- */
.ctaband{background:var(--blue);color:#fff;padding:56px 0}
.ctaband .row{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.ctaband h2{color:#fff;font-size:clamp(30px,4.6vw,52px);max-width:20ch;line-height:1.05}

/* --- footer --- */
footer{background:var(--pink);color:var(--blue);padding:54px 0 24px;border-top:2px solid var(--blue)}
footer .logomark{height:52px;margin-bottom:14px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
footer .blurb{font-size:13.5px;line-height:1.75;max-width:32ch;color:#4d4d80}
footer h5{font-family:'Montserrat',sans-serif;font-weight:800;color:var(--blue);font-size:12.5px;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:13.5px}
footer ul a:hover{color:#000}
.fbot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid rgba(25,25,111,.2);margin-top:38px;padding-top:18px;font-family:'Space Mono',monospace;font-size:11px;color:#5a5a86}

/* --- responsive --- */
@media(max-width:1020px){
  .hero .grid,.bluesec .grid,.split,.contact .grid{grid-template-columns:1fr;gap:34px}
  .cards{grid-template-columns:1fr 1fr}
  .stats .grid{grid-template-columns:1fr 1fr;gap:26px 0}
  .stat:nth-child(3){padding-left:0;border-left:none}
  .fgrid{grid-template-columns:1fr 1fr}
  .nav nav a:not(.btn){display:none}
  .backed .row{grid-template-columns:1fr;gap:24px;justify-items:start}
  .clogos{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .wrap{padding:0 20px}
  .sec,.contact{padding:52px 0}
  .hero{padding:46px 0 54px}
  .cards,.cards.two,.frow,.fgrid,.stats .grid{grid-template-columns:1fr}
  .stat{padding-left:0;border-left:none;border-top:2px solid var(--blue);padding-top:20px}
  .stat:first-child{border-top:none;padding-top:0}
  .jobband .big li{-webkit-text-stroke-width:1.8px}
  .jobband .big li .n{display:none}
  .reachlist .r{flex-direction:column;gap:5px}
  .jobs,form{box-shadow:6px 6px 0 var(--blue);padding:24px}
}

/* ======================================================================
   SERVICE PAGES  (services.html + services/*.html)
   Same tokens and idiom as the one-pager: pink fields, blue ink,
   white cards with 2px keylines and hard offset shadows.
   ====================================================================== */

/* --- breadcrumbs --- */
.crumbs{background:var(--pink-pale);border-bottom:1.5px solid var(--line);padding:13px 0;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut)}
.crumbs a{color:var(--blue)}
.crumbs a:hover{text-decoration:underline}
.crumbs span{opacity:.45;margin:0 5px}

/* --- service hero --- */
.svchero{background:var(--pink);border-bottom:2px solid var(--blue);padding:66px 0 72px;position:relative;overflow:hidden}
.svchero::after{content:"";position:absolute;right:-190px;top:-200px;width:560px;height:560px;border-radius:50%;background:var(--pink-deep);opacity:.5}
.svchero .wrap{position:relative;z-index:2}
.svchero h1{font-size:clamp(38px,6.6vw,86px);line-height:.94;margin:18px 0 0}
.svchero h1 em{font-style:normal;color:#fff;-webkit-text-stroke:2.5px var(--blue);paint-order:stroke fill}
.svchero .lede{margin:22px 0 30px;max-width:56ch;font-size:18px;color:#2a2a5e}
.svchero .cta{display:flex;gap:12px;flex-wrap:wrap}

/* --- long-form prose --- */
.prose p{font-size:17.5px;color:#33335f}
.prose p+p{margin-top:16px}
.prose p:first-child{font-size:19px;color:#2a2a5e}

/* --- faq accordion --- */
.faqs{display:flex;flex-direction:column;gap:12px}
.faq{background:#fff;border:2px solid var(--blue);border-radius:14px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:20px 54px 20px 24px;position:relative;font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.3px;color:var(--blue);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-family:'Anton',sans-serif;font-size:26px;color:var(--pink-deep);line-height:1}
.faq[open] summary::after{content:"\2212"}
.faq[open] summary{border-bottom:1.5px solid var(--line)}
.faq p{padding:18px 24px 22px;font-size:15.5px;color:var(--mut)}

/* --- long-tail keyword list --- */
.keyterms{list-style:none;display:flex;flex-wrap:wrap;gap:9px}
.keyterms li{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.6px;color:var(--blue);background:var(--pink-pale);border:1.5px solid var(--line);border-radius:22px;padding:9px 15px}

/* --- related services --- */
.relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.relcard{display:flex;flex-direction:column;gap:7px;background:#fff;border:2px solid var(--blue);border-radius:14px;padding:20px 22px;font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;font-size:17px;color:var(--blue);transition:.16s}
.relcard:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--blue)}
.relcard .rn{font-family:'Space Mono',monospace;font-weight:400;font-size:10px;letter-spacing:1.3px;color:var(--mut);text-transform:uppercase}

/* --- hub cards --- */
.svccard{display:flex;flex-direction:column;text-align:left}
.svccard .n{margin-bottom:2px}
.svccard h3{font-size:23px}
.svccard .more{margin-top:auto;padding-top:14px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--blue)}

/* --- service page contact block --- */
.svcform{background:#fff;border:2px solid var(--blue);border-radius:18px;padding:30px;box-shadow:10px 10px 0 var(--blue)}
.svcform h3{font-size:23px;margin-bottom:18px}
.svcform.sent .done{display:block}

@media(max-width:1020px){
  .relgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .relgrid{grid-template-columns:1fr}
  .svchero{padding:44px 0 48px}
  .svcform{box-shadow:6px 6px 0 var(--blue);padding:24px}
  .prose p{font-size:16.5px}
  .prose p:first-child{font-size:17.5px}
}

/* ======================================================================
   SERVICES HUB refinements: white field, pink-edged cards, tabs
   ====================================================================== */
body.plain{background:#fff}
.svchero.tight{padding:46px 0 50px}
.svchero.tight h1{font-size:clamp(32px,5.2vw,64px);margin-top:14px}
.svchero.tight .lede{margin:18px 0 0;font-size:17px;max-width:62ch}
.sec.white{background:#fff;border-top:2px solid var(--blue);border-bottom:2px solid var(--blue)}
.sec.tight{padding:52px 0 62px}
.sechead.compact{margin-bottom:26px}
.sechead.compact h2{font-size:clamp(28px,4.2vw,48px)}
.sechead.compact .lede{margin-top:14px}

/* tabs */
.tabs{display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap}
.tab{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.6px;color:var(--blue);background:#fff;border:2px solid var(--blue);border-radius:26px;padding:12px 22px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:.16s}
.tab:hover{background:var(--pink-pale)}
.tab span{font-family:'Space Mono',monospace;font-weight:700;font-size:10px;background:var(--pink);color:var(--blue);border-radius:20px;padding:3px 8px;line-height:1}
.tab.is-on{background:var(--blue);color:#fff}
.tab.is-on span{background:var(--pink);color:var(--blue)}

/* pink-edged cards for the white field */
.cards.edged .card{border-color:var(--pink-deep)}
.cards.edged .card:hover{box-shadow:9px 9px 0 var(--pink-deep)}
.cards.edged .card .n{color:var(--pink-deep);opacity:1}

/* footer contact block */
.fcontact{display:flex;flex-direction:column;gap:8px;margin-top:16px;font-size:13.5px}
.fcontact a{color:var(--blue);text-decoration:underline}
.fcontact a:hover{color:#000}
.fcontact .tofill{align-self:flex-start}

@media(max-width:640px){
  .tabs{gap:8px}
  .tab{font-size:12px;padding:11px 16px}
  .svchero.tight{padding:34px 0 38px}
}