@font-face{
  font-family:"IBM Plex Sans Arabic";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-400-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face{
  font-family:"IBM Plex Sans Arabic";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans Arabic";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-500-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face{
  font-family:"IBM Plex Sans Arabic";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans Arabic";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-600-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face{
  font-family:"IBM Plex Sans Arabic";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Instrument Sans";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Instrument Sans";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Jost";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Jost";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("fonts/jost-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================================================================
   alidaadouch.com home, September 2026 redesign.
   One page, five sections: hero, what I do, work, about, booking.
   Paper and teal, Jost for display, Instrument Sans for reading.
   No monospace labels. The yellow marker is used once, in the h1.
   The booking widget keeps every id site.js depends on; only its
   look changed (bottom of this file).
   ================================================================ */

:root{
  --paper:#F9F7F2; --card:#FFFFFF; --panel:#F1EEE7;
  --teal:#0B4650; --teal-mid:#3E6A72; --muted:#6B7478; --grey:#8A9195;
  --rule:#E2DED4; --rule-2:#D3CEC2; --pale:#A8C2C5;
  --yellow:#E6FF2B; --live:#11724F; --live-bg:#EEF8F3; --live-rule:#BFE0D2;
  --err:#B4431F;
  --display:"Jost",system-ui,sans-serif;
  --sans:"Instrument Sans",system-ui,sans-serif;
  --arabic:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --r-sm:10px; --r:16px; --r-lg:22px;
  --gutter:clamp(20px,4vw,32px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:clip}
html.smooth-js{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--teal);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--gutter)}
[lang="ar"]{font-family:var(--arabic)}

.skip{position:absolute;top:8px;inset-inline-start:8px;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;background:var(--teal);color:#fff;padding:10px 14px;border-radius:8px;z-index:50}
.skip:focus{width:auto;height:auto;clip:auto;overflow:visible}

/* gentle arrival; site.js adds .in as each block scrolls into view */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:999px;
  border:1.5px solid var(--rule-2);background:transparent;color:var(--teal);font-family:var(--sans);font-weight:600;
  font-size:16px;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s}
.btn:hover{border-color:var(--teal)}
.btn:active{transform:translateY(1px)}
.btn.acc{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.acc:hover{background:#08363E;border-color:#08363E}
.btn.sm{padding:10px 18px;font-size:15px}

/* ---------- header ---------- */
.bar{position:sticky;top:0;z-index:20;background:rgba(249,247,242,.92);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.bar.scrolled{border-bottom-color:var(--rule)}
.bar .wrap{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand-mk{display:block;height:38px;width:auto;flex:none}
.brand-nm{font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:-.01em}
.bar-nav{display:flex;gap:28px;font-size:15px}
.bar-nav a{text-decoration:none;color:var(--teal-mid);transition:color .2s}
.bar-nav a:hover{color:var(--teal)}

/* language control (behaviour in site.js) */
.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:7px;background:none;border:1px solid var(--rule-2);border-radius:999px;padding:8px 12px;color:var(--teal-mid);cursor:pointer;font-size:14px}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{border-color:var(--teal);color:var(--teal)}
.lang-btn svg{fill:none;stroke:currentColor;stroke-width:1.3}
.lang-btn .chev{stroke-width:1.6}
.lang-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-sm);box-shadow:0 14px 40px rgba(11,70,80,.12);padding:6px;display:grid}
.lang-panel a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 11px;border-radius:7px;text-decoration:none;font-size:15px}
.lang-panel a i{font-style:normal;font-size:12px;color:var(--grey)}
.lang-panel a:hover,.lang-panel a:focus-visible{background:var(--panel)}
.lang-panel a.on{background:var(--panel);font-weight:600}
.lang-panel a[lang="ar"] span{font-family:var(--arabic)}

/* ---------- hero ---------- */
.hero{padding:clamp(28px,6vw,64px) 0 clamp(40px,6vw,72px);position:relative}
/* the flowing lines from the quotation cover (page-src/make-waves.py), faded out
   before they reach the headline. site.js draws them live on a canvas (.wv) in
   the same place and hides this still copy; with reduced motion the still copy stays. */
.hero::before,.hero > .wv{position:absolute;top:0;right:0;bottom:0;width:min(58vw,900px);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48%);mask-image:linear-gradient(90deg,transparent 0,#000 48%)}
.hero::before{content:"";background:url("waves-hero.svg") center/100% 100% no-repeat}
.hero.wv-live::before{display:none}
/* a canvas keeps its own proportions unless told its height */
.hero > .wv{height:100%}
.hero > .wrap{position:relative;z-index:1}
.hero-solo{max-width:840px}
.me{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.me img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.me p{line-height:1.35}
.me b{display:block;font-family:var(--display);font-weight:500;font-size:19px}
.me span{font-size:14.5px;color:var(--teal-mid)}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(42px,6vw,76px);line-height:1.04;letter-spacing:-.022em;margin-bottom:24px}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--yellow) 62%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lede{font-size:clamp(17px,1.7vw,20px);color:var(--teal-mid);max-width:36em;margin-bottom:32px}
.hero-links{display:flex;gap:12px;flex-wrap:wrap}
.hero-note{font-size:14px;color:var(--muted);margin-top:14px}
.hero .proof{margin-top:clamp(40px,6vw,64px)}

/* proof tiles: what a visitor checking me can verify at a glance.
   Same tiles as the quotation overview, the strongest one in teal. */
.proof{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1.35fr 1fr 1fr .72fr;gap:12px}
.proof li{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:18px 20px 20px;min-height:118px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.proof small{display:block;font-size:13px;color:var(--muted)}
.proof b{font-family:var(--display);font-weight:400;font-size:clamp(18px,1.6vw,20px);line-height:1.3}
.proof .primary{background:var(--teal);border-color:var(--teal);color:#fff;position:relative}
.proof .primary > .wv{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 12%,#000 70%);mask-image:linear-gradient(90deg,transparent 12%,#000 70%)}
.proof .primary > :not(.wv){position:relative;z-index:1}
.proof .primary small{color:var(--pale)}
.proof .proof-ln{padding:0;transition:border-color .2s}
.proof .proof-ln:hover{border-color:var(--teal)}
.proof .proof-ln a{flex:1;display:flex;align-items:flex-end;padding:18px 20px 20px;border-radius:inherit;font-family:var(--display);font-size:clamp(18px,1.6vw,20px);line-height:1.3;text-decoration:none;white-space:nowrap}

/* ---------- sections ---------- */
.sec{padding-top:clamp(64px,9vw,104px)}
/* every section on the home and /ai-consulting pages carries a small circled number, as the quotation does.
   Generated by CSS, so no text is added to translate or to llms-full.txt. */
main{counter-reset:sec}
#what .shead h2,#work .shead h2,#about .bio h2,#book .shead h2,#book .faq h2,#steps .shead h2,#build .shead h2,#scope .shead h2,#stages .shead h2,#questions .faq h2{counter-increment:sec;display:flex;align-items:baseline;gap:16px}
#what .shead h2::before,#work .shead h2::before,#about .bio h2::before,#book .shead h2::before,#book .faq h2::before,#steps .shead h2::before,#build .shead h2::before,#scope .shead h2::before,#stages .shead h2::before,#questions .faq h2::before{
  content:counter(sec,decimal-leading-zero);content:counter(sec,decimal-leading-zero) / "";
  flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--rule-2);display:grid;place-items:center;
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;color:var(--teal-mid);line-height:1;
  transform:translateY(-6px)}
/* the number sits on the first line of the heading, so a heading that wraps keeps it at the top */
#book .faq h2,#questions .faq h2{justify-content:center}
.shead{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(10px,6vw,64px);margin-bottom:clamp(28px,4vw,44px);align-items:start}
.shead h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:1.1;letter-spacing:-.015em}
.shead p{color:var(--teal-mid);font-size:18px;padding-top:6px}

/* what I do */
.jobs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--teal)}
.jobs li{padding:28px 28px 4px 0}
.jobs li + li{padding-left:28px;border-left:1px solid var(--rule)}
.jobs h3{font-family:var(--display);font-weight:500;font-size:23px;line-height:1.2;margin:0 0 10px}
.jobs h3::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--yellow);box-shadow:0 0 0 1.5px var(--teal);vertical-align:.2em}
/* English and Turkish: the square hangs in the margin and the text lines up after it */
:root:not([lang="ar"]) .jobs h3,:root:not([lang="ar"]) .jobs p{padding-left:22px}
:root:not([lang="ar"]) .jobs h3{position:relative}
:root:not([lang="ar"]) .jobs h3::before{position:absolute;left:0;top:.5em}
/* Arabic: each heading reads right to left, so the square sits where it starts */
:root[lang="ar"] .jobs h3::before{margin-left:10px}
.jobs p{color:var(--teal-mid);font-size:16px}
.more{margin-top:28px;font-size:16px}
.more a{font-weight:600;text-decoration:none}
.more a:hover{text-decoration:underline;text-underline-offset:4px}

/* work: the problem, then what was built. Three rounded cards in one row, the
   same card as the FAQ and the quotation's tiers. Logos sit on identical tiles
   so the brands read as one list rather than three colour schemes. */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.case{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);padding:28px 26px 26px;display:flex;flex-direction:column;gap:14px}
.case .logo{background:var(--paper)}
.case-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{width:56px;height:56px;border-radius:14px;background:var(--card);border:1px solid var(--rule);display:grid;place-items:center;flex:none}
.logo img{width:62%;height:62%;object-fit:contain}
.logo.wide img{width:70%}
.logo.full{background:none;border:0;overflow:hidden}
.logo.full img{width:100%;height:100%}
.tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.stores{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.store{display:inline-flex;align-items:center;gap:9px;background:#111;color:#fff;border-radius:11px;padding:8px 14px 8px 11px;cursor:default;opacity:.92}
.store svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;flex:none}
.store span{display:grid;line-height:1.1}
.store small{font-size:10.5px;opacity:.8}
.store b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.tag,.facts li{font-size:13px;padding:4px 11px;border-radius:999px;border:1px solid var(--rule-2);color:var(--teal-mid);white-space:nowrap}
.facts{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.tag.live{border-color:var(--live-rule);color:var(--live);background:var(--live-bg)}
.case h3{font-family:var(--display);font-weight:400;font-size:clamp(28px,2.8vw,34px);line-height:1.1;margin-top:4px}
.case dl{margin:0;display:grid;gap:14px}
.case dt{font-size:13px;color:var(--muted);margin-bottom:3px}
.case dd{margin:0}
.case .prob{font-family:var(--display);font-size:19px;line-height:1.4}
.case .store{padding:7px 12px 7px 10px}
.case .store b{font-size:15px}
.case .built{color:var(--teal-mid);font-size:16px}
.case-link{margin-top:auto;padding-top:4px;font-size:15px;font-weight:600;text-decoration:none;align-self:flex-start}
.case-link:hover{text-decoration:underline;text-underline-offset:4px}

/* about */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,64px);align-items:start}
.about h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:1.1;letter-spacing:-.015em;margin-bottom:24px}
.bio p{font-size:19px;margin-bottom:18px}
.bio p + p{color:var(--teal-mid);font-size:17px}
.langs{list-style:none;margin:22px 0 0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.langs li{border:1px solid var(--rule-2);border-radius:999px;padding:5px 13px;font-size:14px}
.bio .btn{margin-top:26px}
.tl{list-style:none;margin:0;padding:0;border-top:1px solid var(--teal)}
.tl li{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--rule)}
.tl span{color:var(--muted);font-size:15px}
.tl b{display:block;font-weight:600;font-size:16px}
.tl i{font-style:normal;color:var(--teal-mid);font-size:15px}

/* how it works */
.steps{list-style:none;margin:0 0 clamp(36px,5vw,56px);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.steps li{position:relative}
.steps li:not(:last-child)::before{content:"";position:absolute;left:46px;right:-18px;top:17px;height:1.5px;background:var(--rule-2)}
.steps .n{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;font-family:var(--sans);font-size:15px;font-weight:600;line-height:1}
.steps .when{display:inline-block;margin-top:16px;font-size:13px;line-height:1.4;color:var(--teal-mid);border:1px solid var(--rule-2);border-radius:999px;padding:3px 11px;background:var(--paper)}
.steps h3{font-family:var(--display);font-weight:500;font-size:21px;margin:10px 0 6px}
.steps p{color:var(--teal-mid);font-size:16px}

/* booking band */
.book{background:var(--teal);color:#fff;border-radius:26px;padding:clamp(22px,3.6vw,40px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(24px,4vw,56px);align-items:center;position:relative}
.book::before,.cta-band::before,.book > .wv,.cta-band > .wv{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 10%,#000 75%);mask-image:linear-gradient(90deg,transparent 10%,#000 75%)}
.book::before,.cta-band::before{content:"";background:url("waves-band.svg") center/100% 100% no-repeat}
.book.wv-live::before,.cta-band.wv-live::before{display:none}
.book > *,.cta-band > *{position:relative;z-index:1}
.book > .wv,.cta-band > .wv{width:100%;height:100%}
.cta-band::before{background-size:100% 260%}
.book h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:1.1;letter-spacing:-.015em;color:#fff}
.book-sub{color:#C9DADC;font-size:17px;margin-top:14px;max-width:30em}
.book > *{min-width:0}
.book-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.book-list li{padding-left:14px;border-left:2px solid rgba(201,218,220,.35);color:#C9DADC;font-size:15px;line-height:1.5}
.book-list b{display:block;color:#fff;font-weight:600;font-size:14.5px;margin-bottom:2px}

/* FAQ */
.faq{max-width:780px;margin-top:clamp(48px,7vw,72px)}
.faq h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,36px);margin-bottom:10px}
.faq details{border-bottom:1px solid var(--rule);padding:18px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font-family:var(--display);font-size:20px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted);font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin-top:10px;color:var(--teal-mid)}

/* ---------- footer ---------- */
.foot{margin-top:clamp(72px,10vw,104px);border-top:1px solid var(--rule);position:relative}
.foot > .wv{position:absolute;left:0;bottom:100%;width:100%;height:clamp(56px,7vw,88px);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent)}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px 28px;flex-wrap:wrap;padding-top:28px;padding-bottom:36px;font-size:15px;color:var(--teal-mid)}
.foot nav{display:flex;gap:10px 22px;flex-wrap:wrap}
.foot a{text-decoration:none}
.foot a:hover{color:var(--teal);text-decoration:underline;text-underline-offset:4px}

/* ---------- narrow ---------- */
@media (max-width:979px){.cases{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .bar .wrap{height:64px;gap:12px}
  .bar-nav{display:none}
  .brand-nm{font-size:18px}
  .brand-mk{height:30px}
  .hero::before,.hero > .wv{width:100%;bottom:auto;height:min(92vw,420px);opacity:.75;
    -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
  .proof{grid-template-columns:1fr 1fr;gap:10px}
  .proof li{min-height:104px;padding:14px 16px 16px}
  .proof .proof-ln a{padding:14px 16px 16px}
  #what .shead h2::before,#work .shead h2::before,#about .bio h2::before,#book .shead h2::before,#book .faq h2::before,#steps .shead h2::before,#build .shead h2::before,#scope .shead h2::before,#stages .shead h2::before,#questions .faq h2::before{width:32px;height:32px;font-size:13px}
  #what .shead h2,#work .shead h2,#about .bio h2,#book .shead h2,#book .faq h2,#steps .shead h2,#build .shead h2,#scope .shead h2,#stages .shead h2,#questions .faq h2{gap:12px}
  #book .faq h2,#questions .faq h2{flex-direction:column;align-items:center;gap:10px}
  #book .faq h2::before,#questions .faq h2::before{transform:none}
  .shead{grid-template-columns:1fr}
  .shead p{padding-top:0}
  .jobs{grid-template-columns:1fr}
  .jobs li,.jobs li + li{padding:22px 0;border-left:0;border-bottom:1px solid var(--rule)}
  .case{padding:24px 22px}
  .about{grid-template-columns:1fr}
  .tl li{grid-template-columns:96px 1fr;gap:12px}
  .steps{grid-template-columns:1fr;gap:22px}
  .steps li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:16px}
  .steps .n{grid-row:1 / span 3}
  .steps .when{justify-self:start;margin-top:5px}
  .steps h3{margin:8px 0 4px}
  .steps li:not(:last-child)::before{left:16.25px;right:auto;top:40px;bottom:-18px;width:1.5px;height:auto}
  .book{grid-template-columns:minmax(0,1fr);border-radius:20px}
}
@media (max-width:420px){
  .bar .btn.sm{padding:9px 14px}
  .lang-btn .code{display:none}
}

/* ================================================================
   The booking widget. Markup and ids are unchanged from the previous
   page; site.js drives every state. Rounded, sans, no monospace.
   ================================================================ */
.cal{background:var(--card);color:var(--teal);border-radius:var(--r);padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.14)}
.cal .lbl,.cal .wl{font-size:13px;color:var(--muted)}
.cal-steps{display:flex;margin:0 0 12px;border-bottom:1px solid var(--rule)}
.cal-steps i{flex:1;font-style:normal;font-size:12px;color:var(--grey);padding:0 0 8px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.cal-steps i.on{color:var(--teal);border-bottom-color:var(--teal);font-weight:600}
.cal-steps i.done{color:var(--teal-mid)}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:8px}
.cal-month{font-family:var(--display);font-size:17px;font-weight:500}
.cal-nav{background:none;border:1px solid var(--rule-2);border-radius:9px;width:32px;height:32px;cursor:pointer;display:grid;place-items:center;color:var(--teal);transition:background .2s,color .2s,border-color .2s}
.cal-nav svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cal-nav:hover:not(:disabled){background:var(--teal);color:#fff;border-color:var(--teal)}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-wd{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;padding-bottom:6px}
.cal-wd span{font-size:11px;color:var(--muted);text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.cal-d{aspect-ratio:1.3/1;min-width:0;min-height:30px;display:flex;align-items:center;justify-content:center;position:relative;font-family:var(--sans);font-size:14px;font-weight:500;border:1px solid transparent;border-radius:8px;background:var(--panel);color:var(--teal);cursor:pointer;padding:0;transition:background .18s,color .18s,border-color .18s}
.cal-d:hover{border-color:var(--teal)}
.cal-d.off{background:transparent;color:var(--grey);cursor:default;opacity:.55;font-weight:400}
.cal-d.off:hover{border-color:transparent}
.cal-d.pad{background:none;cursor:default}
.cal-d.today::after{content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--teal-mid)}
.cal-d.sel{background:var(--teal);color:#fff;border-color:var(--teal)}
.cal-d.sel.today::after{background:var(--yellow)}
.cal-key{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted)}
.cal-key i{width:12px;height:12px;display:inline-block;margin-left:9px;border-radius:3px}
.cal-key i:first-child{margin-left:0}
.cal-key .k-free{background:var(--panel);border:1px solid var(--rule-2)}
.cal-key .k-off{background:transparent;border:1px dashed var(--rule-2)}
.cal-tz{margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--teal-mid)}
.cal-tz a{color:var(--teal);text-underline-offset:3px}
.cal.down .cal-head,.cal.down .cal-wd,.cal.down .cal-grid,.cal.down .cal-key{display:none}
.cal.down .cal-tz{margin-top:0;font-size:15.5px;color:var(--teal)}
.cal-step{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule);display:grid;gap:10px;justify-items:start}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.slot{font-family:var(--sans);font-size:14px;font-weight:500;padding:8px 6px;text-align:center;border:1px solid var(--rule-2);border-radius:10px;background:var(--card);color:var(--teal);cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.slot:hover{border-color:var(--teal);background:var(--panel)}
.slot.sel{background:var(--teal);color:#fff;border-color:var(--teal)}
.slot i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:2px;font-weight:400}
.slot.sel i{color:var(--pale)}
@media (pointer:coarse){.cal-nav{width:40px;height:40px}.cal-d{min-height:38px}.slot{padding:12px 6px}}

/* where you are: the list floats over the calendar as a popup, so opening it
   never changes the height of the card or the teal band around it */
.tzp{gap:8px;position:relative}
.tzp-now{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:1px solid var(--rule-2);border-radius:10px;background:var(--card);color:var(--teal);cursor:pointer;padding:8px 12px;text-align:left;transition:background .18s,color .18s,border-color .18s}
.tzp-now:hover,.tzp-now:focus-visible{border-color:var(--teal);background:var(--panel)}
.tzp-now b{font-weight:500;font-size:15px;line-height:1.3}
.tzp-now i{font-style:normal;font-size:13px;color:var(--muted);flex:none}
.tzp-now[aria-expanded="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}
.tzp-now[aria-expanded="true"] i{color:var(--pale)}
.tzp-panel{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:40;background:var(--card);border:1px solid var(--rule);border-radius:14px;box-shadow:0 22px 60px rgba(8,40,46,.22);overflow:hidden;animation:tzp-in .16s ease-out}
@keyframes tzp-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tzp-panel{animation:none}}
.tzp-q{display:block;width:calc(100% - 16px);margin:8px;border:1px solid var(--rule-2);border-radius:10px;background:var(--card);font-family:var(--sans);font-size:16px;color:var(--teal);padding:10px 12px;-webkit-appearance:none}
.tzp-q::placeholder{color:var(--grey)}
.tzp-q:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,70,80,.12)}
.tzp-none{padding:10px 16px 14px;font-size:14px;line-height:1.5;color:var(--teal-mid)}
.tzp-list{position:relative;width:100%;max-height:clamp(220px,36vh,300px);overflow-y:auto;background:var(--card);padding:0 6px 6px;scrollbar-width:thin;scrollbar-color:var(--rule-2) transparent;overscroll-behavior:contain}
.tzp-list::-webkit-scrollbar{width:12px}
.tzp-list::-webkit-scrollbar-track{background:transparent}
.tzp-list::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:999px;border:4px solid var(--card)}
.tzp-h{position:sticky;top:0;z-index:1;display:block;margin:0 -6px;padding:10px 18px 6px;background:var(--card);font-size:12px;font-weight:600;color:var(--muted)}
.tzp-o{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:1px 0;padding:10px 12px;border:0;border-radius:9px;background:none;color:var(--teal);font-family:var(--sans);font-size:15px;line-height:1.35;text-align:left;cursor:pointer;transition:background .15s,color .15s}
.tzp-label{display:block;min-width:0}
.tzp-city{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.tzp-o i{font-style:normal;font-size:12.5px;color:var(--muted);flex:none}
.tzp-o:hover,.tzp-o:focus-visible{background:var(--panel);outline:0}
.tzp-o.on{background:var(--teal);color:#fff}
.tzp-o.on i,.tzp-o.on .tzp-city{color:var(--pale)}
@media (pointer:coarse){.tzp-o{padding:13px 12px}}

.chosen{display:grid;gap:4px;justify-items:start;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--rule)}
.done-t{font-family:var(--display);font-size:21px;line-height:1.3;letter-spacing:-.01em;max-width:30ch}
.done-s{font-size:14px;color:var(--teal-mid)}
.done-h{font-size:14px;line-height:1.55;color:var(--teal-mid);max-width:40ch}
.reset{background:none;border:0;padding:0;color:var(--teal);font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.reset:hover{color:#08363E}

.bkf{display:grid;gap:14px;width:100%}
.bkf-l{display:grid;gap:6px;font-size:14px;font-weight:500;color:var(--teal)}
.bkf-l > span{display:flex;gap:6px}
.bkf-l i{font-style:normal;font-weight:400;color:var(--muted)}
.bkf input,.bkf textarea{font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--teal);background:var(--card);border:1px solid var(--rule-2);border-radius:10px;padding:11px 12px;width:100%;-webkit-appearance:none;transition:border-color .18s,box-shadow .18s}
.bkf textarea{resize:vertical;min-height:76px}
.bkf input:focus,.bkf textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,70,80,.12)}
.bkf input[aria-invalid="true"],.bkf textarea[aria-invalid="true"]{border-color:var(--err)}
.bkf-ts{min-height:0}
.bkf .btn{justify-self:start}
.bkf .btn[disabled]{cursor:progress;background:var(--teal-mid);border-color:var(--teal-mid)}
.bkf-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bkf-e{font-size:14px;line-height:1.55;color:var(--err)}
.bkf-e a{color:var(--err)}
.bkf-n{font-size:13px;line-height:1.55;color:var(--teal-mid);max-width:42ch}
.bkf input.bkf-code{font-variant-numeric:tabular-nums;font-size:24px;font-weight:600;letter-spacing:.32em;text-indent:.32em;text-align:center;max-width:8em;direction:ltr}
#code-t{font-family:var(--sans);font-size:17px;line-height:1.45;overflow-wrap:anywhere;unicode-bidi:isolate}
.bkf-again{display:flex;flex-wrap:wrap;gap:8px 20px}
.cal-ok{background:var(--live-bg);border:1px solid var(--live-rule);border-radius:12px;padding:18px}
.cal-ok .wl{color:var(--live);font-weight:600}
#done-go{margin-top:6px}
.cal-more{margin-top:12px;padding-top:10px;border-top:1px solid var(--rule);font-size:13px;line-height:1.55;color:var(--teal-mid)}
.cal-more a{color:var(--teal);text-underline-offset:3px}

/* ---- the calendar keeps one size ----
   Your zone sits at the top and its list drops down over the calendar.
   Picking a day slides the times in over the same space; "All dates" goes
   back. Nothing below the card moves while a visitor chooses. */
.tz-row{min-height:38px;margin-bottom:12px}
.tz-row .tzp{margin:0;padding:0;border:0;display:flex;align-items:center;gap:10px}
.tz-row .tzp > .lbl{flex:none;font-size:13px;color:var(--muted)}
.tz-row .tzp-now{flex:1;min-width:0}
.tz-row .tzp-now b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tz-row .tzp-panel{top:calc(100% + 6px);bottom:auto;animation:tzp-down .16s ease-out}
@keyframes tzp-down{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tz-row .tzp-panel{animation:none}}
.cal-view{position:relative}
.cal-times{position:absolute;inset:0;z-index:5;background:var(--card);display:flex;flex-direction:column;gap:12px;animation:times-in .22s ease-out}
@keyframes times-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cal-times{animation:none}}
.times-back{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 0 2px;color:var(--teal);font-family:var(--sans);font-weight:600;font-size:14px;cursor:pointer}
.times-back svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.times-back:hover{text-decoration:underline;text-underline-offset:4px}
.cal .cal-times .lbl{font-family:var(--display);font-size:19px;line-height:1.3;color:var(--teal)}
.cal-times .slots{gap:8px}
.cal-times .slot{padding:13px 6px;font-size:15px}

/* ---- the details step, sized to sit in the same card ----
   The slot and "Change the time" share one row, name and email sit side by
   side, the note is one line tall until someone types more. */
#stage-form .chosen{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:0;padding-bottom:12px;margin-bottom:12px}
#stage-form .chosen .wl{display:none}
#stage-form .chosen .done-t{grid-column:1;font-size:17px}
#stage-form .chosen .done-s{grid-column:1;margin:0;font-size:13px}
#stage-form .chosen .reset{grid-column:2;grid-row:1 / span 2;margin:0;font-size:13.5px}
#bkf{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
#bkf > *{grid-column:1 / -1}
#bkf > label[for="bk-name"],#bkf > label[for="bk-mail"]{grid-column:auto}
#bkf .bkf-l{font-size:13px;gap:4px}
#bkf input,#bkf textarea{padding:9px 11px}
#bkf textarea{min-height:44px;height:44px}
#bkf .btn{justify-self:stretch;margin-top:2px}
#bkf .bkf-n{font-size:12px;line-height:1.45}
#stage-code .chosen{padding-bottom:12px;margin-bottom:12px}
@media (max-width:420px){#bkf{grid-template-columns:minmax(0,1fr)}#bkf > label[for="bk-name"],#bkf > label[for="bk-mail"]{grid-column:1 / -1}}

/* ---- FAQ, centred ---- */
.faq{max-width:760px;margin:clamp(56px,8vw,88px) auto 0;position:relative}
/* lines in the empty margins either side of the questions, faded at the top and bottom */
.faq > .wv{position:absolute;top:-48px;left:50%;width:100vw;height:calc(100% + 96px);transform:translateX(-50%);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 14%,transparent 34%,transparent 66%,#000 86%,#000),linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 0,#000 14%,transparent 34%,transparent 66%,#000 86%,#000),linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-composite:intersect}
.faq > :not(.wv){position:relative;z-index:1}
@media (max-width:900px){.faq > .wv{display:none}}
.faq h2{text-align:center;font-size:clamp(28px,3.2vw,40px);margin-bottom:8px}
.faq-sub{text-align:center;color:var(--teal-mid);margin:0 0 26px}
.faq details{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:0;margin-bottom:10px;transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:var(--rule-2);box-shadow:0 10px 30px rgba(11,70,80,.06)}
.faq summary{padding:18px 22px;font-size:18px;align-items:center}
.faq summary::after{content:"";width:22px;height:22px;flex:none;border-radius:50%;border:1px solid var(--rule-2);background:
  linear-gradient(var(--teal),var(--teal)) center/9px 1.6px no-repeat,
  linear-gradient(var(--teal),var(--teal)) center/1.6px 9px no-repeat;transition:transform .2s}
.faq details[open] summary::after{content:"";background:linear-gradient(var(--teal),var(--teal)) center/9px 1.6px no-repeat}
.faq details p{margin:0;padding:0 22px 18px;color:var(--teal-mid)}
/* questions and answers centred in their cards too; the +/- sits at the right edge */
.faq summary{position:relative;justify-content:center;text-align:center;padding:18px 58px}
.faq summary::after{position:absolute;right:20px;top:50%;margin-top:-11px}
.faq details p{text-align:center;padding:0 58px 20px}
@media (max-width:600px){.faq summary{padding:16px 46px;font-size:17px}.faq summary::after{right:14px}.faq details p{padding:0 22px 18px}}
#bkf .btn{order:10;grid-column:1;margin-top:2px}
#bkf .bkf-use{order:11;grid-column:2;align-self:center;margin:0}
#bkf .bkf-e,#bkf #bk-say{order:12}
@media (max-width:420px){#bkf .btn,#bkf .bkf-use{grid-column:1 / -1}}
@media (min-width:901px){#stage-pick,#stage-form,#stage-code{min-height:352px}}
@media (max-width:480px){.tz-row .tzp > .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* ================================================================
   Inner pages: how an engagement runs, privacy, 404
   ================================================================ */
.page-kicker{font-size:15px;color:var(--teal-mid);margin-bottom:18px}
.page-date{color:var(--muted);font-size:15px;margin-top:10px}
.flow3{list-style:none;margin:0;padding:0;border-top:1px solid var(--teal)}
.flow3 > li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:24px;padding:32px 0 8px;position:relative}
.flow3 > li:not(:last-child)::before{content:"";position:absolute;left:19.25px;top:80px;bottom:-26px;width:1.5px;background:var(--rule-2)}
.flow3 .n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--teal);color:#fff;font-family:var(--sans);font-size:16px;font-weight:600;line-height:1}
.flow3 h3{font-family:var(--display);font-weight:500;font-size:26px;margin-bottom:8px}
.flow3 p{color:var(--teal-mid);max-width:40em}
.flow3 ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.flow3 ul li{border:1px solid var(--rule-2);border-radius:999px;padding:6px 13px;font-size:14.5px}
.builds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.builds li{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:24px}
.builds h3{font-family:var(--display);font-weight:500;font-size:21px;margin-bottom:6px}
.builds h3::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--yellow);box-shadow:0 0 0 1.5px var(--teal);vertical-align:.2em}
:root:not([lang="ar"]) .builds h3,:root:not([lang="ar"]) .builds p{padding-left:22px}
:root:not([lang="ar"]) .builds h3{position:relative}
:root:not([lang="ar"]) .builds h3::before{position:absolute;left:0;top:.5em}
:root[lang="ar"] .builds h3::before{margin-left:10px}
/* before we start: what the client brings, and what is not included (the quotation's two cards) */
.sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.side{border:1px solid var(--rule);border-radius:var(--r-lg);padding:26px 28px 14px;background:var(--panel)}
.side.out{background:var(--card)}
.side h3{font-family:var(--display);font-weight:500;font-size:21px;margin-bottom:10px}
.side ul{list-style:none;margin:0;padding:0}
.side li{position:relative;padding:12px 0 12px 20px;border-top:1px solid var(--rule);color:var(--teal-mid);font-size:16px;line-height:1.5}
.side li::before{content:"";position:absolute;left:0;top:20px;width:8px;height:8px;border-radius:50%}
.side.in li::before{background:var(--teal-mid)}
.side.out li::before{box-shadow:inset 0 0 0 1.5px var(--teal-mid)}
:root[lang="ar"] .side li{padding-left:0}
:root[lang="ar"] .side li::before{position:static;display:inline-block;margin-left:10px;vertical-align:.1em}
.builds p{color:var(--teal-mid);font-size:16px}
.prose{max-width:44em;display:grid;gap:16px;font-size:18px}
.prose em{font-style:normal;font-weight:600}
.cta-band{background:var(--teal);color:#fff;border-radius:26px;padding:clamp(26px,4vw,44px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;position:relative}
.cta-band h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.2vw,40px);color:#fff}
.cta-band p{color:#C9DADC;margin-top:8px}
.btn.light{background:#fff;border-color:#fff;color:var(--teal)}
.btn.light:hover{background:var(--paper);border-color:var(--paper)}
.pv{margin:0;border-top:1px solid var(--teal)}
@media (max-width:900px){.sides{grid-template-columns:minmax(0,1fr)}}
.pv-r{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--rule)}
.pv dt{font-family:var(--display);font-weight:500;font-size:19px}
.pv dd{margin:0;color:var(--teal-mid)}
.pv dd{grid-column:2}
.pv dd + dd{margin-top:10px}
.pv-ask{margin-top:36px;background:var(--card);border:1px solid var(--rule);border-radius:18px;padding:26px;display:grid;gap:10px;justify-items:start}
.pv-ask .wl{font-size:13px;color:var(--muted)}
.pv-ask-t{font-family:var(--display);font-size:22px}
.pv-ask-n{font-size:14px;color:var(--muted)}
.doors{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:10px;max-width:640px}
.door{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center;background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:18px 20px;text-decoration:none}
.door:hover{border-color:var(--teal)}
.door-n{font-family:var(--display);color:var(--muted)}
.door b{display:block;font-family:var(--display);font-weight:500;font-size:20px}
.door-d{color:var(--teal-mid);font-size:15px}
@media (max-width:900px){.flow3 > li{gap:16px}.builds{grid-template-columns:1fr}.pv-r{grid-template-columns:1fr;gap:6px}.pv dd{grid-column:1}}

/* ================================================================
   Arabic: one face for everything, no tracking (it breaks the joins),
   taller lines. The page keeps the English layout (dir="ltr"), so
   nothing is mirrored; each block still works out its own reading
   direction, which keeps punctuation and Latin words in the right place
   ================================================================ */
:root[lang="ar"]{--display:"IBM Plex Sans Arabic",system-ui,sans-serif;--sans:"IBM Plex Sans Arabic",system-ui,sans-serif}
[lang="ar"] body,[lang="ar"] .btn,[lang="ar"] input,[lang="ar"] textarea,[lang="ar"] button{letter-spacing:0}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3{letter-spacing:0}
[lang="ar"] .hero h1{line-height:1.3;font-weight:500}
[lang="ar"] .shead h2,[lang="ar"] .about h2,[lang="ar"] .book h2,[lang="ar"] .faq h2,[lang="ar"] .cta-band h2{line-height:1.35;font-weight:500}
[lang="ar"] .case h3,[lang="ar"] .jobs h3,[lang="ar"] .steps h3{line-height:1.4}
:root[lang="ar"] body{text-align:left}
:root[lang="ar"] body *{unicode-bidi:plaintext}
@media (pointer:coarse){.lang-btn{min-height:40px;padding:8px 12px}.times-back{min-height:40px}}