/* ============================================================
   Sameh Mohamed — portfolio
   1 tokens · 2 base · 3 top blocks · 4 bands · 5 layer · 6 menu
   7 section content · 8 responsive
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{font-family:'Bricolage';src:url('../assets/fonts/BricolageGrotesque-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Bricolage';src:url('../assets/fonts/BricolageGrotesque-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Instrument';src:url('../assets/fonts/InstrumentSans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Instrument';src:url('../assets/fonts/InstrumentSans-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'GeistMono';src:url('../assets/fonts/GeistMono-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'GeistMono';src:url('../assets/fonts/GeistMono-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
/* V53 · Arabic glyphs (only downloaded when a page shows Arabic text) */
@font-face{font-family:'Readex';src:url('../assets/fonts/ReadexPro-Arabic-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Readex';src:url('../assets/fonts/ReadexPro-Arabic-500.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Readex';src:url('../assets/fonts/ReadexPro-Arabic-700.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
/* Arabic falls back to the system Segoe UI/system font stack without missing-file requests. */

/* ---------- 1 · tokens ---------- */
:root{
  --background:#F1F6F4;
  --surface:#FFFFFF;
  --surface-secondary:#E3EDE9;
  --border:#CCDDD7;
  --form-border:#B3C9C2;
  --text-primary:#172B36;
  --text-secondary:#3E5963;
  --text-muted:#4F6A73;
  --text-very-muted:#90A7AE;
  --placeholder:#7F979F;
  --brand-primary:#FF4D00;
  --brand-hover:#E04400;
  --brand-dark:#B33600;
  --brand-soft:#FFEDE5;
  --brand-soft-strong:#FFD3BF;
  --brand-medium:#FF6A2E;
  --gray:#D9E8E2;             /* mint (was silver) — black text only, never orange text */
  --yt-red:#E5231A;           /* agreed YouTube red: fiery, close to the orange, still red */
  --dark-background:#172B36;
  --dark-surface:#1D3542;
  --dark-surface-elevated:#244150;
  --dark-border:#34515F;
  --dark-text:#F1F6F4;
  --dark-secondary:#BCCFD4;
  --dark-muted:#9DB4BB;
  --success:#23855B;
  --error:#C9362B;

  --ink:var(--text-primary);
  --ink-2:var(--dark-surface);
  --paper:var(--background);
  --paper2:var(--surface-secondary);
  --mid:var(--gray);
  --orange:var(--brand-primary);
  --orange-hover:var(--brand-hover);
  --orange-text:var(--brand-dark);
  --orange-bright:var(--brand-medium);
  --orange-soft:var(--brand-soft);
  --accent-text:var(--orange-text);
  --red:var(--yt-red);
  --wrong:var(--error);
  --ok:var(--success);
  --white:var(--surface);
  --muted:var(--text-muted);
  --muted-paper:var(--text-muted);

  --ink-08:rgba(23,43,54,.08);
  --ink-12:var(--border);
  --ink-18:var(--form-border);
  --ink-30:var(--text-very-muted);
  --pap-12:rgba(241,246,244,.12);
  --pap-18:var(--dark-border);
  --pap-30:var(--dark-muted);
  --pap-55:var(--dark-muted);
  --pap-75:var(--dark-secondary);

  --display:'Bricolage','Readex','Segoe UI',system-ui,sans-serif;
  --body:'Instrument','Readex','Segoe UI',system-ui,sans-serif;
  --mono:'GeistMono','Readex','Segoe UI',ui-monospace,monospace;

  /* site width = the V13 width: a 10–24px outer gutter + a 20–60px inner margin, content
     capped at 1320px (1440 minus the margins). Every band, the hero, nav, footer, menu and
     every internal page use these same two numbers, so all content edges line up. */
  --gut:clamp(10px,1.6vw,24px);
  --max:calc(1440px + 2 * var(--gut));
  --pad:calc(var(--gut) + clamp(20px,3.6vw,60px));
  --strip:54px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;max-width:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link:focus{position:fixed!important;z-index:300!important;left:16px!important;top:16px!important;width:auto!important;height:auto!important;margin:0!important;padding:12px 16px!important;overflow:visible!important;clip:auto!important;white-space:normal!important;background:var(--ink);color:var(--paper)}

.mono{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);width:100%}

h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.04}
h2{font-size:clamp(28px,3.4vw,44px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;padding:17px 26px;border:1px solid transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease}

.btn-dark{background:var(--ink);color:var(--paper);font-weight:700}
.btn-light{background:var(--paper);color:var(--ink);font-weight:700}
.btn-orange{background:var(--orange);color:var(--ink);font-weight:700}
.btn-orange:hover,.btn-orange:focus-visible{background:var(--ink);color:var(--paper)}
/* ---- one hover language: fills flip, nothing lifts ----
   on light / silver surfaces the fill turns black; on black and red it turns white or orange */
.btn-dark:hover,.btn-dark:focus-visible,.btn-light:hover,.btn-light:focus-visible{background:var(--orange);color:var(--ink)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ghost-light:hover,.btn-ghost-light:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.top .btn-orange:hover,.top .btn-orange:focus-visible,.band-ink .btn-orange:hover,.band-ink .btn-orange:focus-visible,
.pbar .btn-orange:hover,.ckp-final .btn-orange:hover,.ckp-final .btn-orange:focus-visible{background:var(--paper);color:var(--ink)}
.btn-ghost{border-color:var(--ink-30)}
.btn-ghost-light{border-color:var(--pap-30);color:var(--paper)}
.btn.big{padding:22px 34px;font-size:12.5px}
.band-cta{margin-top:38px}

/* ---------- 3 · top blocks ---------- */
/* V42 hero — "cinematic": the portrait fills the right side of the dark stage, the headline
   sits over its faded edge, numbers + "also trusted by" marks run along the bottom line. */
.top{position:relative;background:var(--ink);color:var(--dark-text);overflow-x:clip}
/* nav + hero sit on the same content width as every other section (max 1440 + side padding);
   only the black background runs to the screen edges */
.nav{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:24px;
  width:100%;max-width:var(--max);margin:0 auto;padding:30px var(--card-pad) 0}
.logo{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em;display:inline-flex;align-items:center;min-height:40px;color:var(--dark-text)}
.logo span{color:var(--orange)}
.nav-right{display:flex;align-items:center;gap:16px}
.menu-btn{display:flex;align-items:center;gap:10px;border:1px solid var(--dark-text);background:var(--ink);color:var(--dark-text);padding:9px 14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s}
.menu-btn:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
/* V53 · language switch beside the menu button */
.lang-switch{display:inline-flex;align-items:center;min-height:40px;padding:0 4px;color:var(--dark-text);font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:7px;transition:color .2s}
.lang-switch:hover{color:var(--orange)}
.lang-switch:lang(ar){font-size:14px;letter-spacing:0;text-transform:none}
.menu-count{font-weight:700}
.ring{display:flex}
.ring-bg{fill:none;stroke:var(--dark-border);stroke-width:2.5}
.ring-fg{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-dasharray:69;stroke-dashoffset:69;
  transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .4s ease}

/* hero grid: availability pill on top, copy in the middle, the numbers line at the bottom */
/* z-index:0 makes the hero its own layer: the portrait (z -1) sits above the dark background but under the copy,
   without trapping the fixed side rail (it lives in .top) under the sections below. */
.hero{position:relative;z-index:0;display:grid;grid-template-rows:auto 1fr auto;min-height:870px;max-width:var(--max);margin:0 auto;padding:104px var(--card-pad) 0}
/* the photo is sized from the content frame (max 1440 + gutters), not the screen, so it looks the same on 1440, 1920 and 2560 */
.hero-photo{position:absolute;z-index:-1;top:0;right:0;bottom:0;width:58%;margin:0;overflow:hidden;background:#C8101A}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:62% 30%}
.hero-photo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--ink) 0%,rgba(23,43,54,.55) 30%,rgba(23,43,54,0) 60%),linear-gradient(0deg,var(--ink) 0%,rgba(23,43,54,0) 32%)}
.hero-avail{justify-self:end;display:flex;align-items:center;gap:16px;padding:14px 20px;background:var(--orange);color:var(--ink);text-align:left;transition:background .2s,color .2s,box-shadow .2s}
.hero-avail .k{display:flex;align-items:center;gap:9px;font:9.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.availability-dot{width:8px;height:8px;margin-top:3px;flex:none;border-radius:50%;background:currentColor;animation:availability-breathe 2.6s ease-in-out infinite}
@keyframes availability-breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.78)}}
.hero-avail b{font:700 16px/1.1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.hero-avail:hover,.hero-avail:focus-visible{background:var(--ink);color:var(--orange);box-shadow:inset 0 0 0 2px var(--orange)}
.hero-copy{align-self:center;min-width:0;max-width:820px;padding:22px 0 42px}
.eyebrow{display:flex;align-items:center;gap:15px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dark-secondary);margin-bottom:32px}
.eyebrow::before{content:'';width:28px;height:3px;background:var(--orange);flex:0 0 auto}
h1{font-size:clamp(34px,4.4vw,70px);letter-spacing:-.04em}
.hero-copy h1{max-width:10em;font-size:clamp(44px,5.8vw,86px);line-height:1.02;letter-spacing:-.05em;margin-bottom:26px;color:var(--dark-text)}  /* 10em = always 3 lines on the side-photo layout, so "touch." never runs over the face */
.hero-copy h1 em{font-style:normal;color:var(--orange)}
.hero-btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}
.hero-btns .hero-proposal-inline{margin:0 0 0 12px;padding-bottom:5px}  /* small text link on the button row */
@media (max-width:640px){.hero-btns .hero-proposal-inline{margin:4px 0 0}}  /* phones: it wraps under the buttons, so line it up with them */
/* screens wider than the frame: the photo's right edge fades into the dark band instead of ending on a hard line */
@media (min-width:1500px){.hero-photo::after{background:linear-gradient(90deg,var(--ink) 0%,rgba(23,43,54,.55) 30%,rgba(23,43,54,0) 60%),linear-gradient(270deg,var(--ink) 0%,rgba(23,43,54,0) 16%),linear-gradient(0deg,var(--ink) 0%,rgba(23,43,54,0) 32%)}}
.hero-foot{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(24px,3vw,44px);min-height:120px;border-top:1px solid rgba(241,246,244,.18)}
.hero-nums{display:flex;gap:clamp(28px,3.4vw,48px)}
.hero-nums b{display:block;font:700 clamp(28px,2.4vw,36px)/1 var(--display);letter-spacing:-.03em;color:var(--dark-text)}
.hero-nums span{display:block;margin-top:9px;font:9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dark-secondary)}
.hero-trust{display:flex;align-items:center;gap:22px;min-width:0;height:56px;padding-left:clamp(20px,2.4vw,32px);border-left:1px solid rgba(241,246,244,.18)}
.hero-trust[hidden]{display:none}
.hero-trust p{flex:0 0 auto;font:9.5px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dark-secondary)}
.hero-trust-logos{display:flex;align-items:center;gap:30px;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 88%,transparent)}
.hero-trust-logos img{flex:0 0 auto;width:auto;height:26px;filter:brightness(0) invert(1);opacity:.78}

.pulse{width:9px;height:9px;border-radius:50%;background:var(--orange);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(255,77,0,.5);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(255,77,0,0)}100%{box-shadow:0 0 0 0 rgba(255,77,0,0)}}
.hire-bar .pulse{background:var(--orange)}

/* rail + hire bar */
.rail{position:fixed;left:0;top:0;height:100vh;width:70px;z-index:70;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;pointer-events:none;transition:color .3s ease}
.rail button{pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-width:32px;padding:3px 0;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;transition:color .25s,transform .22s cubic-bezier(.2,.8,.2,1)}
.rail .rail-num{display:block;transform-origin:left center;transition:transform .22s cubic-bezier(.2,.8,.2,1),font-size .22s,font-weight .22s}
.rail button.on-dark{--rail-accent:var(--orange-bright);color:var(--dark-secondary)}
.rail button.on-light{--rail-accent:var(--orange-text);color:rgba(23,43,54,.62)}
.rail button.on-dark:hover,.rail button.on-dark:focus-visible,.rail button.on-dark.is-seen{color:var(--dark-text)}
.rail button.on-light:hover,.rail button.on-light:focus-visible,.rail button.on-light.is-seen{color:var(--ink)}
.rail button.is-seen .dot{opacity:1}
.rail .dot{position:absolute;left:-11px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;
  background:var(--orange);opacity:0;transition:.2s}
.rail.on-dark{--accent-text:var(--orange-bright)}
.rail.on-light{--accent-text:var(--orange-text)}
.rail button.is-now .rail-num{font-size:15px;font-weight:700;color:var(--rail-accent,var(--accent-text))}
.rail button.is-now .dot{opacity:1}
.rail button.on-dark.is-now .dot{background:var(--dark-text)}
.rail button.on-light.is-now .dot{background:var(--orange-text)}
.rail .rail-name{position:absolute;left:34px;white-space:nowrap;background:var(--ink);color:var(--paper);padding:8px 12px;
  border-left:3px solid var(--orange);box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateX(-8px) scale(.94);transform-origin:left center;transition:.22s ease;pointer-events:none}
.rail button:hover .rail-num,.rail button:focus-visible .rail-num{font-size:16px;font-weight:700;transform:scale(1.08);color:var(--rail-accent,var(--accent-text))}
.rail button:hover .rail-name,.rail button:focus-visible .rail-name{opacity:1;transform:translateX(0) scale(1.08);font-size:11px}
.rail button.on-dark .rail-name{background:var(--paper);color:var(--ink)}
.rail button.on-light .rail-name{background:var(--ink);color:var(--paper)}
.rail>i{width:12px;height:1px;transition:background .25s ease}
.rail>i.on-dark{background:var(--dark-border)}
.rail>i.on-light{background:rgba(23,43,54,.24)}
/* on the palette gray the rail turns fully black — orange has no contrast there */
.rail.on-gray{--accent-text:var(--ink)}
.rail button.on-gray{--rail-accent:var(--ink);color:rgba(23,43,54,.82)}
.rail button.on-gray .dot,.rail button.on-gray.is-now .dot{background:var(--ink)}
.rail>i.on-gray{background:rgba(23,43,54,.45)}
.hire-bar{--accent-text:var(--orange-bright);position:fixed;right:0;bottom:0;z-index:41;background:var(--ink);color:var(--paper);display:flex;align-items:center;gap:10px;
  padding:14px 22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  transform:translateY(110%);opacity:0;pointer-events:none;visibility:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .25s,visibility 0s .3s}
.hire-bar.is-in{transform:none;opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
.hire-bar b{color:var(--accent-text)}

/* ---------- 4 · bands ---------- */
.band{padding:clamp(52px,5.6vw,78px) 0}
.is-openable{position:relative;cursor:pointer}
.is-openable::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.is-openable:hover::before,.is-openable:focus-within::before{transform:scaleX(1)}
.sec-open{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);
  opacity:0;transform:translateX(-6px);transition:.25s}
.is-openable:hover .sec-open{opacity:1;transform:none}
.sec-visited{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:currentColor;
  opacity:.5;border:1px solid currentColor;padding:4px 8px}
@media (hover:none){.sec-open{opacity:1;transform:none}}
.band-light{background:var(--paper);color:var(--ink)}
.band-paper2{background:var(--paper2);color:var(--ink)}
.band-ink{--accent-text:var(--orange-bright);background:var(--ink);color:var(--paper)}
.band-mid{--accent-text:var(--orange-bright);background:var(--mid);color:var(--paper)}
.band-head{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:46px;max-width:64ch}
.band-num{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-text);margin-bottom:14px}
.band-num::after{content:'';flex:1;height:1px;min-width:60px;background:currentColor;opacity:.35}
.band-note{max-width:46ch;font-family:var(--display);font-weight:400;font-size:clamp(17px,1.4vw,20px);line-height:1.5;letter-spacing:-.01em;opacity:.78;margin-top:18px}
.band-note.wide{max-width:56ch;opacity:.8}

.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pcard{cursor:pointer;background:var(--white);border:1px solid var(--ink-12);position:relative;text-align:left;
  display:flex;flex-direction:column;transition:border-color .2s ease}
.pcard::before{content:'';position:absolute;left:0;top:0;height:3px;width:100%;background:var(--orange)}
.pcard.no-preview::before{background:var(--ink-18)}
.pcard:hover{border-color:var(--ink)}
.pcard:hover .go{background:var(--ink);color:var(--paper)}
.pcard .media{height:180px;background:linear-gradient(140deg,var(--surface-secondary),var(--border));position:relative;background-size:cover;background-position:center}
.pcard .flag{position:absolute;left:14px;top:14px;background:var(--orange);color:var(--ink);font-family:var(--mono);
  font-weight:700;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px}
.pcard.no-preview .flag{background:var(--ink-12);color:var(--text-secondary);font-weight:400}
.pcard .pbody{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.pcard h3{font-size:21px}
.pcard p{font-size:13.5px;color:var(--text-secondary);margin-top:8px;line-height:1.55;flex:1}
.pcard .ptools{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--ink-12)}
.pcard .ptools span{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);
  border:1px solid var(--ink-18);padding:5px 8px}
.pcard .go{margin-left:auto;width:30px;height:30px;border-radius:50%;background:var(--orange);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.pcard.no-preview .go{background:var(--ink-08);color:var(--text-secondary)}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink-18);border:1px solid var(--ink-18)}
.svc{background:var(--white);padding:30px 28px 34px;text-align:left;cursor:pointer;position:relative;
  display:flex;flex-direction:column;transition:background .2s ease,transform .2s ease}

.svc::after{content:'→';position:absolute;right:24px;bottom:26px;font-size:15px;color:var(--ink-30);transition:.2s}
.svc:hover::after{color:var(--accent-text);transform:translateX(3px)}
.svc .mark{width:46px;height:46px;border:1px solid var(--ink-18);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.svc .mark svg{width:24px;height:24px}
.svc.is-new .mark{border-color:var(--brand-medium);background:var(--brand-soft)}
.svc h3{font-size:19px;line-height:1.25}
.svc p{font-size:13.5px;color:var(--text-secondary);margin-top:9px;line-height:1.6}
.svc .tag{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);margin-top:12px}

/* ---------- 04 · toolkit ticker ---------- */
.ticker{position:relative;overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ticker-track{display:flex;width:max-content;gap:26px;
  animation:tickerRun var(--pace,40s) linear infinite;will-change:transform}
@keyframes tickerRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(var(--shift,50%) * -1),0,0)}}
.ticker.is-paused .ticker-track,.ticker:hover .ticker-track{animation-play-state:paused}
.tcell{flex:0 0 auto;display:flex;align-items:center;gap:12px;min-width:0;padding:8px 0}
.tcell::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--orange);opacity:.55;margin-left:14px;flex:0 0 auto}
.tcell .ticon{width:36px;height:36px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tcell .ticon img{display:block;width:100%;height:100%;object-fit:contain}
.tcell b{display:block;font-size:15px;font-family:var(--display);font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.tcell .tkind{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);display:block;margin-top:2px;white-space:nowrap}

.logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:26px}

.course-cards{display:grid;gap:12px}
.course-cards button{background:var(--white);border:1px solid var(--ink-12);padding:20px 22px;text-align:left;
  display:flex;justify-content:space-between;align-items:center;gap:20px}
.course-cards b{font-family:var(--display);font-size:19px;display:block;letter-spacing:-.02em;text-transform:none}
.course-cards .car{display:block;font-family:var(--display);font-weight:400;font-size:14px;color:var(--text-secondary);margin-top:5px;direction:rtl}
.lms-ar{display:block;font-family:var(--display);font-weight:400;font-size:13.5px;color:var(--text-secondary);margin-top:6px;direction:rtl}
.head-ar{font-family:var(--display);font-weight:400;font-size:clamp(15px,1.4vw,19px);opacity:.6;margin-top:8px;direction:rtl}
.course-cards .ckind{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);display:block;margin-top:6px}
.course-cards i{font-style:normal;width:30px;height:30px;border-radius:50%;background:var(--orange);color:var(--ink);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-weight:700}

.band-youtube{--accent-text:#FFFFFF;color:#FFFFFF;
  background:radial-gradient(120% 120% at 18% 10%,#EE2C1E 0%,var(--yt-red) 45%,#C81A12 100%)}
.band-youtube .band-num{color:#FFFFFF}
/* V35 palette: the YouTube band keeps the V34 neutrals untouched */
.band-youtube{--background:#F2F2F2;--surface:#FFFFFF;--surface-secondary:#E8E8E8;--border:#DADADA;--form-border:#C4C4C4;
  --text-primary:#111111;--text-secondary:#4A4A4A;--text-muted:#5E5E5E;--text-very-muted:#A3A3A3;--placeholder:#8E8E8E;--gray:#C4C4C4;
  --dark-background:#111111;--dark-surface:#1C1C1C;--dark-surface-elevated:#242424;--dark-border:#3A3A3A;
  --dark-text:#F2F2F2;--dark-secondary:#C8C8C8;--dark-muted:#A6A6A6;
  --ink:#111111;--ink-2:#1C1C1C;--paper:#F2F2F2;--paper2:#E8E8E8;--mid:#C4C4C4;--white:#FFFFFF;--muted:#5E5E5E;--muted-paper:#5E5E5E;
  --ink-08:rgba(17,17,17,.08);--ink-12:#DADADA;--ink-18:#C4C4C4;--ink-30:#A3A3A3;--pap-12:rgba(242,242,242,.12);
  --pap-18:#3A3A3A;--pap-30:#A6A6A6;--pap-55:#A6A6A6;--pap-75:#C8C8C8}
.yt-wrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,30%,360px);gap:clamp(28px,4vw,64px);align-items:center}
.yt-copy{min-width:0}
.yt-title{font-size:clamp(32px,3.8vw,52px);margin-top:14px}
.yt-ar{font-family:Tahoma,'Segoe UI',Arial,sans-serif;font-weight:700;font-size:clamp(20px,2vw,26px);opacity:.92;margin-top:6px}
.yt-nums{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid rgba(255,255,255,.35);margin-top:30px}
.yt-nums div{padding:16px 20px 0 0;border-right:1px solid rgba(255,255,255,.22)}
.yt-nums div:last-child{border-right:none}
.yt-nums div+div{padding-left:22px}
.yt-nums b{display:block;font-family:var(--display);font-size:clamp(22px,2.4vw,30px);letter-spacing:-.03em}
.yt-nums span{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#FFFFFF}
.yt-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.band-youtube .btn-light{background:#FFFFFF;color:#B3170F}
.band-youtube .btn-ghost-light{border-color:rgba(255,255,255,.6);color:#FFFFFF}
.band-youtube .btn-light:hover,.band-youtube .btn-light:focus-visible{background:var(--ink);color:#FFFFFF}
.band-youtube .btn-ghost-light:hover,.band-youtube .btn-ghost-light:focus-visible{background:#FFFFFF;color:#B3170F;border-color:#FFFFFF}

/* 3D play mark — a white badge with a real extruded side, tilted and floating */
.yt-3d{position:relative;display:grid;place-items:center;min-height:190px;perspective:900px}
.yt-badge{position:relative;display:block;width:min(100%,230px);aspect-ratio:16/11;
  transform-style:preserve-3d;transform:rotateX(14deg) rotateY(-20deg);
  animation:ytFloat 6s ease-in-out infinite}
.yt-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:20%/28%;
  background:linear-gradient(155deg,#FFFFFF 0%,#FFF3F2 46%,#F0D9D7 100%);
  box-shadow:
     4px  4px 0 -1px #EFD3D0,
     8px  8px 0 -2px #E2BBB7,
    12px 12px 0 -3px #CE9C98,
    16px 16px 0 -4px #B47B77,
    22px 24px 34px rgba(60,0,0,.45)}
.yt-face svg{width:26%;height:auto;fill:var(--yt-red);transform:translateX(6%);
  filter:drop-shadow(0 2px 2px rgba(120,0,0,.35))}
.yt-face::after{content:'';position:absolute;left:7%;right:7%;top:6%;height:34%;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.9),transparent);opacity:.55;pointer-events:none}
.yt-shadow{position:absolute;left:12%;right:12%;bottom:2px;height:20px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(90,0,0,.55),transparent 70%);filter:blur(7px);
  animation:ytShadow 6s ease-in-out infinite}
@keyframes ytFloat{
  0%,100%{transform:rotateX(14deg) rotateY(-20deg) translateY(0)}
  50%    {transform:rotateX(11deg) rotateY(-14deg) translateY(-12px)}}
@keyframes ytShadow{0%,100%{opacity:.75;transform:scaleX(1)}50%{opacity:.45;transform:scaleX(.88)}}

.feedback .wrap{display:flex;flex-direction:column}
.quote-youtube-logo{width:28px;height:20px;border-radius:0;background:var(--surface);display:flex;align-items:center;justify-content:center}
.quote-youtube-logo svg{width:8px;height:10px;fill:var(--orange)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--dark-border);display:flex;align-items:center;justify-content:center;
  color:var(--dark-text);font-family:var(--mono);font-size:9px;letter-spacing:.04em;line-height:1;text-transform:uppercase}
.quote-nav{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--pap-18);
  margin-top:34px;padding-top:22px}
.dots{display:flex;gap:7px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--dark-border);transition:.25s}
.dots i.is-on{background:var(--orange);width:22px;border-radius:0}
.arrows{display:flex;gap:10px}
.arrows button{width:44px;height:44px;border:1px solid var(--pap-30);display:flex;align-items:center;justify-content:center;color:var(--paper)}
.arrows button.is-orange{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.arrows button.is-orange:hover,.arrows button.is-orange:active,.arrows button.is-orange:focus-visible{background:var(--orange-hover);border-color:var(--orange-hover);color:var(--ink)}

/* 08 · checkup band — light, copy + static 3 steps on the left, the makeover animation in a black panel */
.band-checkup{background:var(--paper);color:var(--ink)}
.checkup-wrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,40%,540px);gap:clamp(28px,4vw,64px);align-items:center;
  width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.checkup-left{display:flex;flex-direction:column;min-width:0}
.checkup-left h2{margin-bottom:0}
.checkup-cta{align-self:flex-start;margin-top:clamp(26px,2.6vw,38px)}
.ck-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(28px,3vw,42px);
  padding-top:18px;border-top:1px solid var(--form-border)}
.ck-list b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text);margin-bottom:8px}
.ck-list p{font-size:14px;line-height:1.55;color:var(--text-secondary);max-width:26ch}
.checkup-panel{min-width:0}

/* ---- the makeover: one course slide goes from static to interactive ----
   one component, used on the homepage band and inside the checkup page.
   data-step 1 before · 2 my review · 3 after · 4 reply — driven by mkClock in main.js */
.mk{--accent-text:var(--orange-bright);background:var(--ink);color:var(--dark-text);border-radius:0;padding:16px 16px 14px;
  display:flex;flex-direction:column;gap:12px;min-width:0}
.mk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.mk-state{color:var(--orange-bright)}
.mk-pips{display:flex;gap:5px}
.mk-pips i{width:18px;height:3px;border-radius:0;background:var(--dark-border);transition:background .4s}
.mk[data-step="1"] .mk-pips i:nth-child(-n+1),.mk[data-step="2"] .mk-pips i:nth-child(-n+2),
.mk[data-step="3"] .mk-pips i:nth-child(-n+3),.mk[data-step="4"] .mk-pips i{background:var(--orange)}
.mk-slide{position:relative;aspect-ratio:16/10;background:var(--paper);border-radius:0;overflow:hidden;color:var(--ink)}
.mk-title{position:absolute;left:6%;top:8%;height:5.5%;width:52%;border-radius:0;background:var(--gray);transition:background .5s,width .5s}
.mk[data-step="3"] .mk-title,.mk[data-step="4"] .mk-title{background:var(--ink);width:44%}
.mk-text{position:absolute;left:6%;right:10%;top:22%;display:flex;flex-direction:column;gap:9%;height:40%;transition:opacity .45s}
.mk-text i{display:block;height:13%;border-radius:0;background:#C9DBD5}
.mk-text i:nth-child(2){width:88%}.mk-text i:nth-child(3){width:94%}.mk-text i:nth-child(4){width:72%}
.mk-next{position:absolute;right:5%;bottom:7%;font:9px var(--mono);letter-spacing:.12em;background:#C9DBD5;color:var(--ink);padding:5px 9px;transition:opacity .45s}
.mk[data-step="3"] .mk-text,.mk[data-step="4"] .mk-text,.mk[data-step="3"] .mk-next,.mk[data-step="4"] .mk-next{opacity:0}
.mk-scan{position:absolute;left:0;right:0;top:0;height:2px;opacity:0;background:linear-gradient(90deg,transparent,var(--orange),transparent)}
.mk[data-step="2"] .mk-scan{animation:mkScan 2.8s cubic-bezier(.4,0,.2,1) both}
@keyframes mkScan{0%{top:4%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:96%;opacity:0}}
.mk-note{position:absolute;font:9px var(--mono);letter-spacing:.06em;background:var(--orange);color:var(--ink);padding:4px 7px;border-radius:0;
  opacity:0;transform:translateY(6px) scale(.9);transition:opacity .35s,transform .35s}
.mk-note.n1{left:18%;top:25%}.mk-note.n2{left:52%;top:47%}.mk-note.n3{left:12%;top:66%}
.mk[data-step="2"] .mk-note{opacity:1;transform:none}
.mk[data-step="2"] .mk-note.n1{transition-delay:.5s}.mk[data-step="2"] .mk-note.n2{transition-delay:1.2s}.mk[data-step="2"] .mk-note.n3{transition-delay:1.9s}
.mk-live{position:absolute;inset:20% 6% 8% 6%;opacity:0;transition:opacity .45s}
.mk[data-step="3"] .mk-live,.mk[data-step="4"] .mk-live{opacity:1}
.mk-chips{display:flex;align-items:flex-start;gap:6px}
.mk-chip{display:inline-flex;align-items:center;font:10.5px/1.2 var(--body);background:var(--white);border:1px solid var(--ink);border-radius:0;padding:5px 10px;white-space:nowrap}
.mk-boxes{position:absolute;left:0;right:0;bottom:0;height:58%;display:grid;grid-template-columns:1fr 1fr;gap:5%}
.mk-box{position:relative;border:1.5px dashed var(--gray);border-radius:0;padding:7px;display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap;transition:border-color .3s,background .3s}
.mk-box small{position:absolute;left:8px;bottom:6px;font:8px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.mk-box.b1{border:1.5px solid var(--orange);background:var(--orange-soft)}
.mk[data-step="3"] .mk-box.b2{animation:mkBox 4.2s both}
.mk[data-step="4"] .mk-box.b2{border:1.5px solid var(--orange);background:var(--orange-soft)}
@keyframes mkBox{0%,52%{border:1.5px dashed var(--gray);background:transparent}58%,100%{border:1.5px solid var(--orange);background:var(--orange-soft)}}
.mk-ghost{color:transparent;background:none;border:1px dashed var(--gray)}
.mk-fly{position:absolute;left:0;top:0;z-index:2}
.mk[data-step="3"] .mk-fly{animation:mkFly 4.2s cubic-bezier(.3,.7,.2,1) both}
.mk[data-step="4"] .mk-fly{left:54%;top:48%;box-shadow:none}
@keyframes mkFly{0%,12%{left:0;top:0;transform:none;box-shadow:0 0 0 #0000}
  20%{transform:rotate(-5deg) scale(1.06);box-shadow:0 8px 16px #172B3635}
  52%{left:54%;top:48%;transform:rotate(-3deg) scale(1.06)}
  58%,100%{left:54%;top:48%;transform:none;box-shadow:none}}
.mk-hand{position:absolute;left:4%;top:3%;width:16px;height:16px;z-index:3;opacity:0}
.mk[data-step="3"] .mk-hand{animation:mkHand 4.2s cubic-bezier(.3,.7,.2,1) both}
@keyframes mkHand{0%{opacity:0}10%,50%{opacity:1}12%{left:4%;top:3%}52%{left:58%;top:52%}60%,100%{left:58%;top:52%;opacity:0}}
.mk-spot{position:absolute;right:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--orange);color:var(--ink);font:700 13px var(--body);display:grid;place-items:center}
.mk[data-step="3"] .mk-spot{animation:mkSpot 1.4s ease-out infinite}
@keyframes mkSpot{0%{box-shadow:0 0 0 0 rgba(255,77,0,.5)}100%{box-shadow:0 0 0 12px rgba(255,77,0,0)}}
.mk-done{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:12px;background:rgba(23,43,54,.86);color:var(--dark-text);
  opacity:0;transition:opacity .45s}
.mk-done span{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--orange);color:var(--ink);font:700 28px var(--body);
  transform:scale(.6);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.mk-done b{font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase;font-weight:400}
.mk[data-step="4"] .mk-done{opacity:1}
.mk[data-step="4"] .mk-done span{transform:none}
.mk-cap{font-size:13.5px;line-height:1.5;color:var(--dark-secondary);min-height:2.9em}
.mk-cap b{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--orange-bright);font-weight:400;margin-right:6px}

.foot{--accent-text:var(--orange-bright);background:var(--ink);color:var(--pap-55);border-top:1px solid var(--pap-12);padding:24px max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase}
.foot a{display:inline-flex;align-items:center;min-height:40px}
.foot a:hover{color:var(--accent-text)}


/* =====================================================================
   V14 · full-bleed bands
   Every section runs edge to edge with square corners and touches the
   next one — no gutters, no gaps, no radius. The content inside stays on
   the site grid. Neighboring sections never share a surface:
   hero light · projects gray · services black · toolkit light · clients gray ·
   courses black · YouTube red · feedback black · checkup light · contact gray ·
   footer black.
   ===================================================================== */
/* one side margin for the whole site */
:root{
  --card-pad:var(--pad);
}
/* while the numbered rail is on screen (desktop) the margin never drops under 76px,
   so the rail never touches content */
@media (min-width:1181px){:root{--pad:max(calc(var(--gut) + clamp(20px,3.6vw,60px)),76px)}}
main>.band,.foot{width:100%;max-width:none;margin:0;border-radius:0;overflow:hidden;position:relative}
main>.band{padding:clamp(52px,5.6vw,84px) 0}
.foot{border-top:0}
main>.band .wrap,.checkup-wrap{padding:0 var(--card-pad)}

/* darker-gray band — the palette gray only carries black. Orange has the
   same lightness as this gray (contrast 1:1), so on gray every accent,
   label and action turns black; orange stays on light, black and inside cards. */
.band-gray{--accent-text:var(--ink);background:var(--gray);color:var(--ink)}
.band-gray .band-note{opacity:1}
.band-gray .is-openable::before,.band-gray.is-openable::before{background:var(--ink)}
.band-gray .sec-visited{opacity:.8}

/* inner items follow the card corners */
.pcard,.svc,.course-cards button,.qcard{border-radius:0;overflow:hidden}

/* split head — title left, note + action right */
.band-head.is-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:22px 48px;align-items:end;
  max-width:none;margin-bottom:40px}
.band-head.is-split h2{margin:0}
.split-r{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.split-r .band-note{margin-top:0}

/* duo — copy on one side, visual on the other */
.duo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,84px);align-items:center}
.duo.is-flip{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.duo.is-flip .duo-copy{order:2}
.duo-copy{min-width:0}
.duo-side{min-width:0}
.duo-copy .band-note{max-width:40ch}

/* 03 services — a two-column list of rows */
.duo-side .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;background:none;border:0}
.duo-side .svc{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-content:start;
  padding:20px 20px 22px;border:1px solid var(--border)}
.duo-side .svc .mark{grid-row:1 / span 3;width:44px;height:44px;margin:0;border-radius:0}
.duo-side .svc h3{font-size:16.5px}
.duo-side .svc p{font-size:13px;margin-top:6px;padding-right:18px}
.duo-side .svc .tag{margin-top:8px}
.duo-side .svc::after{right:18px;bottom:18px}

/* 04 toolkit — one slim card: label on the left, the moving strip on the right */
main>.band-toolkit{padding:clamp(20px,2.2vw,30px) 0}
.toolkit-bar{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:clamp(210px,22%,290px) minmax(0,1fr);gap:clamp(18px,2.4vw,36px);
  align-items:center;padding:0 var(--card-pad)}
.toolkit-label .band-num{margin-bottom:10px}
.toolkit-label h2{font-size:clamp(19px,1.7vw,24px);line-height:1.15}
.band-toolkit .ticker{padding:4px 0}

/* 05 clients */
.duo-side .logos{margin-bottom:0}

/* 06 courses */
.duo-side .course-cards button{padding:22px 24px}

/* 07 youtube */
.yt-wrap.duo.is-flip{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.yt-3d{justify-items:center}

/* 08 feedback — three cards in view, sliding one per step */
.quote-view{overflow:hidden;margin:0 -2px;padding:2px}
.quote-track{display:flex;gap:16px;transition:transform .6s cubic-bezier(.2,.8,.2,1);will-change:transform}
.qcard{flex:0 0 calc((100% - 32px) / 3);min-width:0;margin:0;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--border);padding:26px 26px 22px;
  transition:opacity .4s ease,border-color .3s ease}
.qcard:not(.is-in){opacity:.35}
.qcard:hover{border-color:var(--orange)}
.qmark{font-family:var(--display);font-weight:700;font-size:56px;line-height:1;height:30px;color:var(--orange)}
.qcard blockquote{flex:1;margin-top:12px;font-family:Tahoma,'Segoe UI',Arial,sans-serif;font-size:16px;line-height:1.8;
  color:var(--ink)}
.qcard figcaption{display:flex;align-items:center;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--border)}
.qwho{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.qcard .avatar{background:var(--paper2);color:var(--ink)}
.qcard .quote-youtube-logo{margin-left:auto;flex:0 0 auto;background:#FF0000}
.qcard .quote-youtube-logo svg{fill:#FFFFFF}
.feedback .quote-nav{margin-top:28px;border-top-color:var(--border)}
.feedback .dots i{background:var(--ink-18)}
.feedback .dots i.is-on{background:var(--orange)}
.feedback .arrows button{border-color:var(--ink-30);color:var(--ink)}
.feedback .arrows button.is-orange{border-color:var(--orange);color:var(--ink)}

/* 03 services — now on a dark card, so the rows turn dark too */
#s-services .svc{background:var(--dark-surface-elevated);border-color:var(--dark-border);color:var(--dark-text)}
#s-services .svc:hover{border-color:var(--orange)}
#s-services .svc .mark{border-color:var(--pap-30);color:var(--dark-text)}
#s-services .svc.is-new .mark{border-color:var(--orange);background:rgba(255,77,0,.14);color:var(--orange-bright)}
#s-services .svc p{color:var(--pap-75)}
#s-services .svc::after{color:var(--pap-55)}

/* 10 contact — a call-to-action card */
main>.band-cta-card{padding:clamp(40px,4.4vw,64px) 0}
.cta-row{display:flex;justify-content:space-between;align-items:center;gap:28px 48px;flex-wrap:wrap}
.cta-copy{max-width:62ch}
.cta-copy h2{margin:0}