/* /fonts.css */
/* Readex Pro, self-hosted. SIL Open Font License 1.1 — see public/fonts/OFL.txt.
   A variable face: one file per script carries the whole 200-700 range, so the four static
   weights the old family needed collapse into two downloads. Served from our own origin;
   the visitor's browser makes no request to a font CDN. */
/* arabic */
@font-face{font-family:'Readex Pro';font-style:normal;font-weight:200 700;font-display:swap;
  src:url(/fonts/readex-pro-v27-arabic.woff2) format('woff2-variations');
  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}
/* latin */
@font-face{font-family:'Readex Pro';font-style:normal;font-weight:200 700;font-display:swap;
  src:url(/fonts/readex-pro-v27-latin.woff2) format('woff2-variations');
  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}

/* /styles.css */
:root{
  /* Ground and surfaces */
  --paper:#FAF8F5;
  --surface:#FFFFFF;
  --sunken:#F2EDE6;
  --white:var(--surface);
  /* Ink */
  --ink:#1A1714;
  --text:#3C3630;
  --muted:#6E655C;
  --steel:#6E655C;
  --ink-deep:#16130F;
  /* Lines */
  --line:#E4DDD3;
  --mist:#E4DDD3;
  --line-strong:#D6CCBE;
  --paper-muted:#B4ABA1;
  /* The single accent */
  --electric:#2F5FD0;
  --accent-strong:#2549A8;
  --accent-soft:#EAF0FC;
  --accent-line:#C5D5F5;
  --max:1296px;
  /* Type scale, ratio ~1.25 from a 16px base. Every font-size on the page is one of these steps. */
  --t-100:.8125rem; --t-200:.9375rem; --t-300:1rem; --t-400:1.1875rem; --t-500:1.5rem;
  --t-600:clamp(1.75rem,3vw,2.125rem); --t-700:clamp(2rem,5vw,3.25rem); --t-800:clamp(2.25rem,7vw,4.5rem);--t-900:clamp(2.7rem,8.6vw,5.625rem);
  /* Space scale. */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  /* Radius by role, not by habit: controls stay tight, surfaces soften, chips go full. */
  --r-control:4px; --r-surface:12px; --r-pill:999px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;max-width:100%;overflow-x:clip;overscroll-behavior-x:none}
body{max-width:100%;overflow-x:clip;overscroll-behavior-x:none}
img,svg,video{max-width:100%}
input,select,textarea{min-width:0;max-width:100%}
body{margin:0;background:var(--paper);color:var(--text);font-family:'Readex Pro',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.shell{width:min(calc(100% - 48px),var(--max));margin-inline:auto}.dark-section{background:var(--paper);color:var(--text)}.section-light{background:var(--paper)}
.nav-wrap{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--paper) 88%, transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav{height:76px;display:flex;align-items:center;gap:34px}.brand{display:flex;align-items:center;gap:12px}.brand-icon{width:30px;height:34px}.brand-word{font-size:var(--t-500);font-weight:700;color:var(--ink)}.nav-links{display:flex;gap:30px;margin-inline:auto;color:var(--text);font-size:var(--t-200)}.nav-links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-control);padding:13px 20px;font-weight:700;font-size:var(--t-200);border:1px solid transparent;transition:.2s ease;cursor:pointer}.btn:hover{transform:translateY(-1px)}.btn-blue{background:var(--electric);color:var(--paper)}.btn-blue:hover{background:var(--accent-strong)}.btn-light{background:var(--ink);color:var(--paper)}.btn-outline{border-color:var(--line-strong);color:var(--ink);background:transparent}.btn-outline:hover{border-color:var(--ink);background:var(--sunken)}.full{width:100%}.nav-cta{padding:10px 17px}
.kicker,.section-label,.form-kicker{font-family:'Readex Pro',system-ui,sans-serif;color:var(--electric);font-weight:600;font-size:var(--t-100)}.hero{padding:84px 0 76px}.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:72px;align-items:start}.hero-copy{padding-top:36px}.hero h1{font-size:var(--t-800);line-height:1.08;margin:18px 0 28px;max-width:780px}.hero-lead{max-width:690px;color:var(--text);font-size:var(--t-400);line-height:1.9;margin:0}.actions{display:flex;gap:12px;margin-top:34px}.micro{font-size:var(--t-100);color:var(--muted);margin-top:26px}
.hero-card{background:var(--sunken);border:1px solid var(--line);padding:28px;min-height:520px}.hero-card-head{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:var(--t-100)}.hero-card-head b{font-family:'Readex Pro';color:var(--electric);font-size:var(--t-200)}.hero-card h2{font-size:var(--t-600);margin:44px 0 10px}.hero-card>p{color:var(--muted);margin:0 0 34px}.decision-steps{list-style:none;padding:0;margin:0;display:grid}.decision-steps li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;padding:18px 0;border-top:1px solid var(--line)}.decision-steps li>span{font-family:'Readex Pro';font-weight:700;color:var(--electric);font-size:var(--t-100)}.decision-steps div{display:grid;gap:2px}.decision-steps strong{font-size:var(--t-300)}.decision-steps small{color:var(--muted)}
.belief{padding:110px 0}.belief-grid{display:grid;grid-template-columns:180px 1fr;gap:60px}.belief-copy h2,.section-heading h2{font-size:var(--t-700);line-height:1.25;margin:0}.belief-copy h2 span{background:var(--electric);color:white;padding:0 8px}.belief-copy p,.section-heading p{font-size:var(--t-400);color:var(--muted);line-height:1.9;max-width:760px}.belief-cards{grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}.contrast-card{min-height:250px;padding:30px;border:1px solid var(--line);display:flex;flex-direction:column}.contrast-card span{font-size:var(--t-100);color:var(--steel)}.contrast-card h3{font-size:var(--t-600);line-height:1.4;margin:40px 0 12px}.contrast-card p{margin-top:auto;color:var(--muted)}.muted-card{background:var(--sunken)}.blue-card{background:var(--electric);color:var(--paper);border-color:var(--electric)}.blue-card span,.blue-card p{color:var(--accent-soft)}
.pillars{padding:110px 0}.section-heading{display:grid;grid-template-columns:180px 1fr;gap:60px;align-items:start}.dark-heading h2{color:var(--ink)}.dark-heading p{color:var(--muted)}.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:60px}.pillar-card{border:1px solid var(--line);background:var(--surface);min-height:0;padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-4);border-radius:var(--r-surface)}.pillar-card h3{font-size:var(--t-600);line-height:1.35;margin:0 0 var(--s-3)}.pillar-card p{color:var(--muted);margin:auto 0 0;line-height:1.75}.pillar-card.featured{background:var(--electric);border-color:var(--electric);color:var(--paper)}.pillar-card.featured p{color:var(--accent-soft)}
.handover{padding:110px 0}.split-heading{grid-template-columns:180px 1fr}.option-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:56px}.option-grid article{background:white;border:1px solid var(--line);min-height:0;padding:var(--s-5)}.option-grid h3{font-size:var(--t-500);line-height:1.4;margin:0 0 var(--s-3)}.option-grid p{color:var(--muted);line-height:1.8}.option-grid .selected{background:var(--electric);color:var(--paper);border-color:var(--electric)}.option-grid .selected b,.option-grid .selected p{color:var(--accent-soft)}
.services{padding:105px 0}.compact-heading{grid-template-columns:180px 1fr}
.process{padding:110px 0}.process-line{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:66px;position:relative}.process-line:before{content:"";position:absolute;top:20px;right:0;left:0;height:1px;background:var(--mist)}.process-line li{position:relative;padding:0 24px 0 18px}.process-line li:first-child{padding-right:0}.process-line span{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;background:var(--paper);border:1px solid var(--electric);color:var(--electric);font:700 var(--t-100) 'Readex Pro';position:relative;z-index:2}.process-line h3{font-size:var(--t-500);margin:32px 0 10px}.process-line p{color:var(--muted);line-height:1.8}
.ownership-band{background:var(--electric);color:white;padding:78px 0}.ownership-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:90px;align-items:center}.ownership-chip{display:inline-block;background:white;color:var(--electric);padding:6px 10px;border-radius:var(--r-pill);font-size:var(--t-100);font-weight:700}.ownership-grid h2{font-size:var(--t-700);line-height:1.2;margin:22px 0}.ownership-grid p{color:var(--accent-soft);font-size:var(--t-400);line-height:1.9;max-width:660px}.ownership-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid color-mix(in srgb, var(--surface) 45%, transparent)}.ownership-grid li{padding:17px 0;border-bottom:1px solid color-mix(in srgb, var(--surface) 45%, transparent);font-weight:600}.ownership-grid li:before{content:'✓';margin-left:12px}
.start{padding:110px 0}.start-heading{margin-bottom:48px}.contact-grid{display:grid;grid-template-columns:1fr .9fr;gap:22px;align-items:start}.ticket-form{background:white;border:1px solid var(--line);padding:28px}.form-head{display:flex;align-items:start;justify-content:space-between;gap:18px;margin-bottom:24px}.form-head h3{font-size:var(--t-500);line-height:1.5;margin:8px 0 0}.ticket-badge{font:700 var(--t-100) 'Readex Pro';color:var(--electric);border:1px solid var(--accent-line);padding:6px 9px}.ticket-form label{display:grid;gap:8px;margin:15px 0;color:var(--steel);font-size:var(--t-100);font-weight:600}.ticket-form input,.ticket-form textarea,.ticket-form select{width:100%;border:1px solid var(--line);background:var(--surface);padding:13px 14px;outline:none;color:var(--ink);border-radius:0}.ticket-form textarea{min-height:100px;resize:vertical}.ticket-form input:focus,.ticket-form textarea:focus,.ticket-form select:focus{border-color:var(--electric);box-shadow:0 0 0 3px var(--accent-soft)}.form-note{font-size:var(--t-100);color:var(--muted);text-align:center;margin-bottom:0}.schedule-card{background:var(--sunken);color:var(--text);border:1px solid var(--line);padding:var(--s-6);min-height:0}.schedule-top{display:flex;align-items:center;justify-content:space-between}.schedule-top>span{background:var(--ink);color:var(--paper);padding:6px 12px;border-radius:var(--r-pill);font-size:var(--t-100);font-weight:600}.schedule-top img{width:34px;height:38px;color:white}.schedule-card h3{font-size:var(--t-600);line-height:1.35;margin:var(--s-5) 0 var(--s-3);color:var(--ink)}.schedule-card>p{color:var(--muted);line-height:1.8}.date-strip{display:flex;gap:8px;overflow:auto;padding:18px 0 6px}.date-btn,.slot-btn{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);padding:10px 12px;font-size:var(--t-100);font-weight:700;cursor:pointer;border-radius:0}.date-btn.active,.slot-btn.active{background:var(--electric);border-color:var(--electric);color:var(--paper)}.slots{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px;min-height:48px}.selection{margin-top:var(--s-4);padding:var(--s-3) var(--s-4);border:1px solid var(--line);border-radius:var(--r-control);color:var(--muted);background:var(--surface)}.muted{color:var(--muted)}.success{margin-top:20px;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--ink);padding:20px;font-weight:700}
footer{background:var(--ink-deep);color:var(--paper);padding:var(--s-8) 0}.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;align-items:end}.footer-brand{display:flex;align-items:center;gap:14px}.footer-brand img{width:42px;height:48px;color:white}.footer-brand div{display:grid}.footer-brand strong{font-size:var(--t-500)}.footer-brand span{font:600 var(--t-100) 'Readex Pro';letter-spacing:.06em;color:var(--muted)}.footer-grid>p{font-size:var(--t-500);line-height:1.45;margin:0;text-align:center}.footer-meta{display:grid;justify-items:end;color:var(--muted);font:600 var(--t-100) 'Readex Pro',system-ui,sans-serif;gap:5px}
@media(max-width:980px){.nav-links{display:none}.hero-grid{grid-template-columns:1fr}.hero-copy{padding-top:0}.hero-card{min-height:auto}.belief-grid,.section-heading{grid-template-columns:1fr;gap:20px}.belief-cards{grid-column:1}.pillar-grid{grid-template-columns:1fr 1fr}.option-grid,.process-line{grid-template-columns:1fr 1fr}.process-line:before{display:none}.process-line li{padding:18px;border-top:1px solid var(--line)}.ownership-grid,.contact-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-grid>p{text-align:right}.footer-meta{justify-items:start}}
@media(max-width:640px){.shell{width:min(calc(100% - 28px),var(--max))}.nav{height:64px}.nav-cta{display:none}.brand-icon{width:24px;height:28px}.brand-word{font-size:var(--t-400)}.hero{padding:58px 0 54px}.hero h1{font-size:var(--t-700);line-height:1.13}.hero-lead{font-size:var(--t-300)}.actions{display:grid}.btn{width:100%}.hero-card{padding:22px}.hero-card h2{font-size:var(--t-600)}.belief,.pillars,.handover,.services,.process,.start{padding:76px 0}.belief-copy h2,.section-heading h2{font-size:var(--t-600)}.belief-cards,.pillar-grid,.option-grid,.process-line{grid-template-columns:1fr}.contrast-card{min-height:220px}.ownership-band{padding:60px 0}.ownership-grid{gap:42px}.ownership-grid h2{font-size:var(--t-600)}.form-head{display:block}.ticket-badge{display:inline-block;margin-top:12px}.footer-grid{gap:24px}.footer-grid>p{font-size:var(--t-400)}}

.honeypot{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:0!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap} :focus-visible{outline:3px solid var(--electric);outline-offset:4px} [hidden]{display:none!important} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*{transition:none!important}}
.skip-link{position:fixed;top:8px;inset-inline-start:8px;transform:translateY(-160%);padding:12px;background:white;color:var(--ink);z-index:100}.skip-link:focus{transform:none}
.seo-main{padding-block:54px 80px;min-height:65vh}.seo-main h1{font-size:clamp(30px,4vw,52px);line-height:1.4;max-width:1000px}.seo-intro{font-size:var(--t-400);line-height:1.9;max-width:850px;color:var(--muted)}.seo-article{max-width:850px;margin-inline:auto}.seo-article section{margin-top:42px}.seo-article h2{font-size:var(--t-600);line-height:1.6}.seo-article p{line-height:2;font-size:var(--t-400)}.breadcrumb{color:var(--steel);font-size:var(--t-200)}.breadcrumb a,.text-link{text-decoration:underline;text-underline-offset:5px}.seo-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:30px 0}.seo-cards article{padding:28px;background:white;border:1px solid var(--line)}.seo-cards h2{font-size:var(--t-500);line-height:1.6;margin-top:0}.seo-cards p{line-height:1.9;color:var(--muted)}.seo-cards a:hover,.service-link:hover{text-decoration:underline;text-underline-offset:5px}.seo-cta{margin:48px 0;padding:28px;background:var(--accent-soft);border:1px solid var(--accent-line)}.seo-cta h2{margin-top:0}.seo-links{display:flex;flex-wrap:wrap;gap:16px 24px;padding-block:28px;line-height:1.8;font-size:var(--t-200);color:var(--paper-muted)}.seo-links a:hover{text-decoration:underline}.seo-related{margin-top:56px}.seo-resources{padding:48px 0}.seo-resources>div>h2{font-size:var(--t-600)}.seo-eyebrow{color:var(--text);line-height:1.9;font-weight:600}details{padding:18px 0;border-bottom:1px solid var(--line)}summary{cursor:pointer;font-weight:600;font-size:var(--t-400)}section[id]{scroll-margin-top:90px}.hero-grid>*,.contact-grid>*,.section-heading>*,.belief-grid>*{min-width:0}.date-btn{flex-shrink:0}.nav .brand{flex-shrink:0}.seo-main img{max-width:100%}.form-note{line-height:1.9;color:var(--muted)}
.analytics-consent{position:fixed;bottom:16px;inset-inline:16px;margin-inline:auto;max-width:680px;z-index:90;background:white;color:var(--ink);border:1px solid var(--line);box-shadow:0 6px 36px color-mix(in srgb, var(--ink) 14%, transparent);padding:18px}.analytics-consent p{font-size:var(--t-200);line-height:1.8;margin:0 0 14px}.analytics-consent a{text-decoration:underline}.analytics-consent>div{display:flex;flex-wrap:wrap;gap:10px}.analytics-consent button{padding:10px 14px;border:1px solid var(--ink);background:white;color:var(--ink);cursor:pointer;font-weight:600}.analytics-consent button:hover{background:var(--accent-soft)}.privacy-choice{font-size:var(--t-100);border:1px solid var(--muted);background:transparent;color:white;padding:8px 12px;margin-block:12px;cursor:pointer}
.hero{background:var(--paper)}.hero-card{border-radius:var(--r-surface);box-shadow:0 20px 60px #0002;min-width:0}.hero-card h2{font-size:clamp(23px,2.5vw,32px)}.hero h1{font-size:var(--t-800);line-height:1.3}.hero h1 span{color:var(--electric)}.hero-copy{padding-top:12px}.belief-copy h2 span{box-decoration-break:clone;-webkit-box-decoration-break:clone}.contrast-card,.pillar-card,.option-grid article,.ticket-form,.schedule-card,.seo-cards article{border-radius:var(--r-surface)}.hero-grid,.belief-grid,.section-heading,.contact-grid,.ownership-grid,.footer-grid{min-width:0}.pillar-grid>*,.option-grid>*,.services-index>*,.process-line>*,.seo-cards>*,.footer-grid>*{min-width:0;overflow-wrap:anywhere}.ticket-form label{min-width:0}.ticket-form input,.ticket-form select,.ticket-form textarea{min-width:0;font-size:var(--t-300);min-height:46px}.success,.selection{overflow-wrap:anywhere}.footer-meta{overflow-wrap:anywhere}.mobile-menu{display:none;position:relative;border:0;padding:0;color:white;margin-inline-start:auto}.mobile-menu summary{font-size:var(--t-200);min-height:44px;padding:10px 12px;list-style:none;display:flex;align-items:center;gap:12px;border:1px solid var(--line-strong);border-radius:var(--r-control)}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-menu nav{position:absolute;top:calc(100% + 10px);inset-inline-end:0;width:240px;max-width:calc(100vw - 28px);background:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r-surface);padding:8px;box-shadow:0 14px 30px #0003}.mobile-menu nav a{display:block;padding:12px;min-height:44px}.mobile-menu nav a:hover{background:var(--accent-soft)}
@media(max-width:980px){.mobile-menu{display:block}.hero-grid{gap:36px}.hero-card{min-height:0}.nav-cta{display:none}.hero h1{font-size:var(--t-800)}}
@media(max-width:640px){.hero h1{font-size:var(--t-800);line-height:1.35}.hero{padding:40px 0}.hero-copy{padding-top:0}.hero-lead{line-height:1.85}.hero-grid{gap:28px}.hero-card{padding:22px}.hero-card h2{margin-top:26px}.belief-copy h2,.section-heading h2{font-size:var(--t-700);line-height:1.5}.ownership-grid h2{font-size:var(--t-600);line-height:1.4}.ticket-form,.schedule-card{padding:20px}.date-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:6px}.date-btn{padding:10px 5px;font-size:var(--t-100);min-width:0;white-space:normal;min-height:46px}.slot-btn{min-height:44px}.analytics-consent{inset-inline:10px;bottom:10px;padding:14px}.analytics-consent button{flex:1;min-height:44px;font-size:var(--t-100)}.hero .actions{margin-top:24px}.seo-eyebrow{font-size:var(--t-200)}.belief,.pillars,.handover,.services,.process,.start{padding:56px 0}.ownership-band{padding:48px 0}}
@media(max-width:640px){.seo-cards{grid-template-columns:1fr}.seo-cards article{padding:22px}.seo-main{padding-block:28px 55px}.seo-intro,.seo-article p{font-size:var(--t-300)}.nav{justify-content:space-between;gap:12px}.nav>.btn{width:auto;font-size:var(--t-100);padding:9px 12px}.seo-article h2{font-size:var(--t-500)}.seo-links{gap:14px}.seo-cta{padding:20px}.hero h1{font-size:var(--t-800)}}

/* Small-screen density. Desktop keeps the approved card proportions; on tablets the number-to-title gap tightens, on phones the numbered cards become compact rows so the text leads instead of the empty space. */
@media(max-width:980px){.contrast-card h3{margin-top:26px}}
@media(max-width:640px){.pillar-card,.option-grid article{min-height:0;padding:18px 18px 20px;display:block}.pillar-card h3,.option-grid h3{margin:0 0 6px;font-size:var(--t-400);line-height:1.5}.pillar-card p,.option-grid p{margin:0;font-size:var(--t-200);line-height:1.75}.contrast-card{min-height:0;padding:20px}.contrast-card h3{margin:12px 0 8px;font-size:var(--t-500)}.contrast-card p{margin:0}.process-line li{padding:16px 0}.process-line h3{margin:12px 0 6px;font-size:var(--t-400)}.process-line p{margin:0;font-size:var(--t-200)}.belief-cards{margin-top:24px}.pillar-grid,.option-grid,.services-index{margin-top:32px}}

/* Small-screen typography and rhythm: 13px floor for meta text, slightly heavier small text on dark backgrounds, and tighter vertical spacing. */
@media(max-width:640px){.kicker,.section-label,.form-kicker,.micro,.form-note,.contrast-card span,.ticket-form label,.footer-meta,.riyadh-now{font-size:var(--t-100)}.date-btn{font-size:var(--t-100)}.hero-lead{font-size:var(--t-300);line-height:1.8}.belief-copy p,.section-heading p,.ownership-grid p{font-size:var(--t-300);line-height:1.8;margin:10px 0 0}.pillar-card p,.option-grid p,.contrast-card p,.process-line p{font-size:var(--t-300);line-height:1.7}.ownership-grid p{font-weight:600}.belief,.pillars,.handover,.services,.process,.start{padding:40px 0}.section-heading,.belief-grid{gap:12px}.belief-cards{margin-top:20px}.pillar-grid,.option-grid,.services-index{margin-top:24px}.process-line{margin-top:24px}.start-heading{margin-bottom:24px}.ownership-band{padding:40px 0}.ownership-grid{gap:28px}.ownership-grid h2{margin:14px 0}.seo-resources{padding:40px 0}.seo-cards{margin:20px 0}.hero .actions{margin-top:20px}.micro{margin-top:16px}footer{padding:32px 0}.footer-grid{gap:16px}}
@media(min-width:641px) and (max-width:980px){.belief,.pillars,.handover,.services,.process,.start{padding:72px 0}.process-line{margin-top:40px}.start-heading{margin-bottom:32px}}

/* Scheduling hand-off: a next step appears after picking a slot, and the chosen slot is echoed in the form. */
.schedule-next{margin-top:14px;display:grid;gap:8px}.schedule-next .muted{font-size:var(--t-100);margin:0;line-height:1.7}.form-appointment{font-size:var(--t-100);color:var(--steel);margin:4px 0 14px;line-height:1.8}.form-appointment:empty{display:none}.form-appointment b{color:var(--ink);font-weight:600}.link-btn{background:none;border:0;padding:0;margin:0;color:var(--electric);text-decoration:underline;text-underline-offset:4px;cursor:pointer;font:inherit}.ticket-form{scroll-margin-top:90px}

/* Appointment carried into the form: banner under the form head while a slot is chosen. */
.form-appointment.is-set{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-surface);padding:12px 14px;color:var(--ink);margin:0 0 8px}.form-appointment.is-set b{display:block;margin:2px 0 4px;font-size:var(--t-200)}[tabindex="-1"]:focus{outline:none}

/* Services read as a studio's capabilities index — name, then what it means, split by hairlines —
   instead of six equal boxes, which is the layout a model reaches for by default. */
.services-index{list-style:none;padding:0;margin:var(--s-7) 0 0;border-top:1px solid var(--line)}
.services-index li{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,9fr);gap:var(--s-2) var(--s-7);align-items:baseline;padding:var(--s-5) 0;border-bottom:1px solid var(--line)}
.services-index h3{font-size:var(--t-600);line-height:1.4;margin:0;font-weight:700;color:var(--ink)}
.services-index p{color:var(--muted);line-height:1.8;margin:0;font-size:var(--t-300)}
@media(max-width:980px){.services-index li{grid-template-columns:1fr;gap:var(--s-2);padding:var(--s-4) 0}.services-index h3{font-size:var(--t-500)}}
@media(max-width:640px){.services-index{margin-top:var(--s-5)}.services-index li{padding:var(--s-3) 0}.services-index h3{font-size:var(--t-400);line-height:1.5}.services-index p{font-size:var(--t-200);line-height:1.75}}

/* The emphasised pillar carries more width than the two beside it, so the row states a preference
   instead of offering three interchangeable cards. */
@media(min-width:981px){.pillar-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr)}}

/* One deliberate break in the dark/light band rhythm: the ownership promise sits as an inset object
   on the light ground rather than becoming a ninth full-bleed stripe. */
.ownership-wrap{padding:var(--s-9) 0}
.ownership-wrap .ownership-band{background:var(--ink);color:var(--paper);border-radius:var(--r-surface);padding:var(--s-8) var(--s-7);margin:0}
@media(max-width:980px){.ownership-wrap{padding:var(--s-7) 0}.ownership-wrap .ownership-band{padding:var(--s-6) var(--s-5)}}
@media(max-width:640px){.ownership-wrap{padding:var(--s-6) 0}.ownership-wrap .ownership-band{padding:var(--s-5) var(--s-4)}}

/* The cost of building the wrong thing: four named failure modes, hairline-separated,
   deliberately not four cards. */
.cost-list{list-style:none;padding:0;margin:var(--s-6) 0 0;grid-column:2;border-top:1px solid var(--line)}
.cost-list li{display:grid;gap:var(--s-1);padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
.cost-list b{color:var(--ink);font-size:var(--t-400);font-weight:600;line-height:1.5}
.cost-list span{color:var(--muted);line-height:1.8}

/* What reaches us: a list of situations in the client's own words. Reads as a checklist
   the visitor scans for themselves, not as a capability grid. */
.intake-list{list-style:none;padding:0;margin:var(--s-7) 0 0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-7)}
.intake-list li{position:relative;padding:var(--s-4) 0 var(--s-4) 0;padding-inline-start:var(--s-5);
  border-bottom:1px solid var(--line);color:var(--text);line-height:1.7}
.intake-list li::before{content:"";position:absolute;inset-inline-start:0;top:calc(var(--s-4) + .7em);
  width:10px;height:1px;background:var(--electric)}
@media(max-width:820px){.intake-list{grid-template-columns:1fr;gap:0}
  .cost-list{grid-column:1}}
@media(max-width:640px){.intake-list{margin-top:var(--s-5)}.intake-list li{padding-block:var(--s-3)}
  .cost-list{margin-top:var(--s-5)}.cost-list li{padding-block:var(--s-3)}
  .cost-list b{font-size:var(--t-300)}.cost-list span{font-size:var(--t-200)}}

/* Intake grouped by what it asks about, so a long form reads as four short ones. */
.form-group{border:0;border-top:1px solid var(--line);padding:var(--s-5) 0 0;margin:var(--s-5) 0 0;min-width:0}
.form-group:first-of-type{border-top:0;padding-top:0;margin-top:var(--s-4)}
.form-group legend{padding:0;color:var(--electric);font-size:var(--t-100);font-weight:600;
  font-family:'Readex Pro',system-ui,sans-serif}
.field-note{display:block;color:var(--muted);font-size:var(--t-100);font-weight:400;line-height:1.7;margin-top:var(--s-1)}
.ticket-form textarea{min-height:0}

/* Proof: what we can say without naming a client or inventing a number. */
.proof-wrap{padding:var(--s-9) 0}
.proof-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s-7);align-items:start}
.proof-grid h2{font-size:var(--t-700);line-height:1.25;margin:0}
.proof-grid>div>p{color:var(--muted);line-height:1.9;margin:var(--s-4) 0 0;max-width:52ch}
.proof-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.proof-list li{display:grid;gap:var(--s-1);padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
.proof-list b{color:var(--ink);font-weight:600;font-size:var(--t-300)}
.proof-list span{color:var(--muted);font-size:var(--t-200);line-height:1.75}
.proof-note{margin-top:var(--s-5);padding:var(--s-4) var(--s-5);background:var(--sunken);
  border-inline-start:2px solid var(--electric);border-start-end-radius:var(--r-control);
  border-end-end-radius:var(--r-control);color:var(--text);font-size:var(--t-200);line-height:1.8}
@media(max-width:980px){.proof-wrap{padding:var(--s-7) 0}.proof-grid{grid-template-columns:1fr;gap:var(--s-5)}}
@media(max-width:640px){.proof-wrap{padding:var(--s-6) 0}.proof-list li{padding-block:var(--s-3)}
  .form-group{padding-top:var(--s-4);margin-top:var(--s-4)}}

/* ---- Commercial pages ---------------------------------------------------
   Reused across /how-we-work, /problem-sprint, /work, /about and /contact.
   Nothing here is page-specific: the same three primitives carry all five. */

/* A page that is neither a card grid nor a single prose column. */
.page-head{max-width:920px}
.page-head .seo-intro{margin-top:var(--s-4)}
.page-section{margin-top:var(--s-8)}
.page-section>h2{font-size:var(--t-600);line-height:1.45;margin:0}
.page-section>p{color:var(--text);line-height:1.95;font-size:var(--t-300);max-width:62ch;margin:var(--s-4) 0 0}
.page-section>.seo-cta{margin-bottom:0}

/* An ordered method. Each step names the artefact it hands over, so the
   sequence reads as commitments rather than as a vocabulary list. */
.step-list{list-style:none;padding:0;margin:var(--s-6) 0 0;border-top:1px solid var(--line)}
.step-list li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,9fr);
  gap:var(--s-2) var(--s-7);align-items:start;padding:var(--s-6) 0;border-bottom:1px solid var(--line)}
.step-list h2{font-size:var(--t-500);line-height:1.45;margin:0;color:var(--ink);font-weight:700}
.step-list p{margin:0;color:var(--text);line-height:1.9;font-size:var(--t-300)}
.step-output{display:block;margin-top:var(--s-3);color:var(--muted);font-size:var(--t-200);line-height:1.8}
.step-output b{color:var(--ink);font-weight:600}

/* A short list that carries sentences, not bullet decoration. */
.plain-list{list-style:none;padding:0;margin:var(--s-5) 0 0;display:grid;gap:var(--s-3);max-width:62ch}
.plain-list li{position:relative;padding-inline-start:var(--s-5);color:var(--text);line-height:1.9}
.plain-list li::before{content:"";position:absolute;inset-inline-start:0;top:.9em;
  width:10px;height:1px;background:var(--line-strong)}

.page-faq{margin-top:var(--s-5)}
@media(max-width:820px){.step-list li{grid-template-columns:1fr;gap:var(--s-2);padding:var(--s-5) 0}
  .step-list h2{font-size:var(--t-400)}}
@media(max-width:640px){.page-section{margin-top:var(--s-6)}.page-section>h2{font-size:var(--t-500)}
  .page-section>p{font-size:var(--t-200);line-height:1.85}.step-list{margin-top:var(--s-5)}
  .step-list li{padding:var(--s-4) 0}.step-list p{font-size:var(--t-200);line-height:1.8}
  .plain-list li{line-height:1.8}}

/* The palette move to paper left three rules painting white on white. */

.mobile-menu{color:var(--ink)}
.mobile-menu nav{background:var(--surface);border-color:var(--line);box-shadow:0 14px 30px #1a171412}
.mobile-menu nav a:hover{background:var(--sunken)}

/* The inverted footer needs its own secondary tone: --muted is tuned for the paper
   ground and lands at 3.2:1 on --ink-deep, under AA. */
.footer-brand span,.footer-meta{color:var(--paper-muted)}
@media(max-width:640px){summary{padding-block:8px}}

/* On the wide pages these rows would otherwise run a single sentence across the full
   shell. They take the same two-column measure as the step list. */
.page-section .proof-list{max-width:1040px}
@media(min-width:821px){.page-section .proof-list li{grid-template-columns:minmax(0,5fr) minmax(0,9fr);
  gap:var(--s-2) var(--s-7);align-items:baseline}
  .page-section .proof-list b{font-size:var(--t-400);line-height:1.5}}

/* The form controls carried outline:none, and their focus shadow was mixed at 0.08%
   of the accent — invisible. A 1px border tint was the only focus feedback on the
   page that actually converts. The base rule outranks the global :focus-visible, so
   these restate it at matching specificity. */
.ticket-form input:focus-visible,.ticket-form textarea:focus-visible,.ticket-form select:focus-visible{
  outline:3px solid var(--electric);outline-offset:2px}

/* /brand.css */
/* Shared logo and ambient artwork, matching Figma pages 05 and 06. */
.brand-icon{width:38px;height:40px;object-fit:contain}
.brand-wordmark,.footer-brand .brand-wordmark{width:40px;height:60px;object-fit:contain}
.brand{gap:14px}
.hero{background:var(--paper);padding-block:64px 0}
.hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
.hero h1{line-height:1.4}
.hero h1 span{color:var(--electric)}
.hero-art{min-width:0;text-align:center;position:relative;padding:24px 0}
.art-eyebrow,.art-caption{font-size:var(--t-100);color:var(--muted);line-height:1.8}
.art-scene{position:relative;isolation:isolate;width:100%;aspect-ratio:502/380;margin:8px auto;max-width:550px}
.art-glow{position:absolute;inset:2%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb, var(--electric) 16%, transparent) 0%,color-mix(in srgb, var(--electric) 6%, transparent) 38%,transparent 68%);animation:art-breathe 12s ease-in-out infinite}
.art-mark{position:absolute;width:42%;height:auto;left:29%;top:18%;object-fit:contain}
.art-orbits{position:absolute;inset:12% 4%;animation:art-orbit 12s ease-in-out infinite;transform-origin:center}
.art-orbits i{position:absolute;inset:12% 2%;border:1px solid color-mix(in srgb, var(--electric) 22%, transparent);border-radius:50%;transform:rotate(-24deg)}
.art-orbits i:nth-child(2){inset:2% 15%;transform:rotate(42deg);border-color:color-mix(in srgb, var(--electric) 15%, transparent)}
.art-orbits i:nth-child(3){inset:27% 0;transform:rotate(12deg);border-color:color-mix(in srgb, var(--electric) 12%, transparent)}
.art-particles{position:absolute;inset:0;animation:art-float 12s ease-in-out infinite}
.art-particles i{position:absolute;width:7px;height:7px;background:var(--electric);border-radius:50%;left:13%;top:45%;box-shadow:0 0 18px color-mix(in srgb, var(--electric) 38%, transparent)}
.art-particles i:nth-child(2){width:5px;height:5px;left:82%;top:27%;background:var(--accent-strong)}
.art-particles i:nth-child(3){width:4px;height:4px;left:73%;top:78%}
.hero-stages{list-style:none;padding:24px 0;margin-block:40px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hero-stages li{display:flex;align-items:center;gap:12px;color:var(--text);font-size:var(--t-200);min-width:0}
.hero-stages b{font:500 var(--t-100) 'Readex Pro',system-ui,sans-serif;color:var(--electric)}
@keyframes art-orbit{0%,100%{transform:rotate(0)}50%{transform:rotate(12deg)}}
@keyframes art-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes art-breathe{0%,100%{opacity:.65}50%{opacity:1}}
@media(max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:16px}.hero-art{order:-1;max-width:440px;width:100%;margin-inline:auto;padding:0}.hero-copy{max-width:760px}}
@media(max-width:640px){.hero{padding-block:24px 0}.hero-art{max-width:300px;padding:0}.art-scene{margin:4px auto}.art-caption{margin:0 0 4px}.hero-stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;margin-top:20px;padding:18px 0}.hero-stages li{font-size:var(--t-100)}.art-caption{font-size:var(--t-100)}.brand-icon{width:32px;height:34px}.brand-wordmark{width:34px;height:52px}.art-orbits{animation-name:art-orbit-mobile}@keyframes art-orbit-mobile{0%,100%{transform:rotate(0)}50%{transform:rotate(6deg)}}}
@media(prefers-reduced-motion:reduce){.art-orbits,.art-particles,.art-glow{animation:none}}
/* Small blue labels need 4.5:1 contrast on the off-white section surface. */
.section-light .section-label{color:var(--electric)}

/* ---- Editorial pass -----------------------------------------------------
   The page argues in type, not in cards. One line carries the argument, the
   kicker sits above it under a hairline, and the artwork breaks the container
   on purpose — once, on the wide screen only. */

.hero{padding-block:clamp(48px,8vh,104px) clamp(44px,6vh,80px)}
.hero h1{font-size:var(--t-900);line-height:1.2;margin-block:var(--s-4) var(--s-6);
  max-width:15ch;font-weight:700;text-wrap:balance}
.hero h1 span{color:var(--electric)}

/* Kicker above the headline, not below it, and quiet enough to stay a kicker. */
.seo-eyebrow{font-size:var(--t-100);font-weight:500;color:var(--muted);line-height:1.7;
  margin:0 0 var(--s-5);padding-block-end:var(--s-3);border-bottom:1px solid var(--line);text-wrap:balance}

/* Readex is variable, so the lead can be genuinely light instead of merely small. */
.hero-lead{font-size:var(--t-500);font-weight:300;line-height:1.7;max-width:28ch;color:var(--text)}

/* The sentence a software house cannot say. It stops being a footnote. */
.micro{font-size:var(--t-200);color:var(--ink);font-weight:500;line-height:1.7;
  margin-top:var(--s-6);padding-inline-start:var(--s-4);border-inline-start:2px solid var(--electric);
  max-width:40ch}

/* The one deliberate break in the grid. */
@media(min-width:981px){.hero-art{margin-inline-end:-9%;max-width:none}}
@media(max-width:980px){.hero h1{max-width:18ch}.hero-lead{max-width:38ch}}
@media(max-width:640px){.hero h1{line-height:1.24;margin-block:var(--s-3) var(--s-5)}
  .hero-lead{font-size:var(--t-400);line-height:1.75;max-width:none}
  .seo-eyebrow{font-size:var(--t-100);margin-bottom:var(--s-4)}
  .micro{margin-top:var(--s-5);font-size:var(--t-100)}}

/* On a phone the mark stays on top, as asked, but it stops being a 285px overture to the
   argument: half the size, so the headline lands in the upper half of the first screen. */
@media(max-width:640px){
  .hero{padding-block:var(--s-5) var(--s-6)}
  .hero-art{max-width:188px}
  .art-scene{margin-block:0}
  .art-eyebrow{display:none}
  .art-caption{margin-block:var(--s-2) 0}
}

/* Readex sits shorter than the previous face, which dropped this inline link under the
   24px target minimum. The hit area is restored without changing how it reads. */
.seo-cards .text-link{display:inline-block;padding-block:var(--s-1);min-height:24px}

/* /interactions.css */
/* ثُلّة interaction layer. Motion, pointer response and state feedback on top of styles.css and brand.css.
   No palette, type or layout change. Without JavaScript the page is the static original; under
   prefers-reduced-motion every animation and parallax in this file is off (only state colors remain). */
:root{--ease-out-expo:cubic-bezier(.16,1,.3,1);--ease-out-quart:cubic-bezier(.25,1,.5,1);--ease-in-out-quart:cubic-bezier(.76,0,.24,1);--ease-out-back:cubic-bezier(.34,1.56,.64,1);--dur-micro:140ms;--dur-small:240ms;--dur-medium:420ms;--dur-large:640ms;--glow:#2F5FD0;--glow-rgb:47,95,208}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.hero-stages b,.pillar-card b,.option-grid b,.services-grid b,.process-line span,.section-label,.kicker,.selection,.riyadh-now time{font-variant-numeric:tabular-nums}

/* Header: reading progress, current section, mobile menu origin */
.nav-progress{position:absolute;inset-inline:0;bottom:0;height:2px;background:linear-gradient(to left,var(--glow),var(--electric));transform:scaleX(var(--scroll,0));transform-origin:100% 50%;pointer-events:none}
/* Touch screens: a 2px hairline is too thin to read at arm's length, and the header is shorter. */
@media(max-width:640px){.nav-progress{height:3px}}
.nav-wrap.is-scrolled{border-bottom-color:rgba(var(--glow-rgb),.16);box-shadow:0 12px 32px -20px var(--ink)}
.nav-links a{position:relative;padding-block:4px}
.nav-links a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:1px;background:var(--glow);transform:scaleX(0);transform-origin:100% 50%}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-links a[aria-current]{color:var(--ink)}
.mobile-menu[open] summary span{transform:rotate(45deg)}
.mobile-menu nav{transform-origin:100% 0}

/* Hero: blueprint dot grid, pointer light, layered artwork */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,rgba(var(--glow-rgb),.55) 1px,transparent 1.6px);background-size:28px 28px;opacity:.22;-webkit-mask-image:radial-gradient(ellipse 60% 85% at 27% 48%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 60% 85% at 27% 48%,#000 0%,transparent 72%)}
/* The light lives in its own masked layer. overflow:hidden on the hero used to slice the
   circle with a hard horizontal edge — under the header at the top, and at the banner's end
   at the bottom — so the glow read as broken rather than as light. The mask fades it out
   before it ever reaches a boundary, on both axes. */
.hero-aura{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 86%,transparent 100%),linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 86%,transparent 100%),linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-composite:intersect}
.hero-spot{position:absolute;top:-360px;left:-360px;width:720px;height:720px;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle,color-mix(in srgb, var(--electric) 11%, transparent) 0%,color-mix(in srgb, var(--electric) 7%, transparent) 38%,transparent 70%);transform:translate3d(var(--sx,0px),var(--sy,0px),0);will-change:transform}
.hero.has-pointer .hero-spot{opacity:1}
.art-scene{--px:0;--py:0}
.art-mark{aspect-ratio:46/47.6577;overflow:visible}
.hero-stages li{position:relative}
.hero-stages li::after{content:"";position:absolute;inset-inline:0;bottom:-8px;height:1px;background:linear-gradient(to left,var(--glow),transparent);opacity:0;transform:scaleX(0);transform-origin:100% 50%}
.hero-stages li.is-live{color:var(--ink)}
.hero-stages li.is-live::after{opacity:1;transform:scaleX(1)}

/* Cards: pointer-tracked light and edge highlight (JS adds .spot-card and --x/--y) */
.spot-card{position:relative;--spot:var(--glow-rgb)}
.spot-card>*{position:relative;z-index:1}
.spot-card::before,.spot-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:0}
.spot-card::before{background:radial-gradient(280px circle at var(--x,50%) var(--y,50%),rgba(var(--spot),.14),transparent 62%)}
.spot-card::after{inset:-1px;padding:1px;background:radial-gradient(240px circle at var(--x,50%) var(--y,50%),rgba(var(--spot),.85),transparent 66%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.spot-card:hover::before,.spot-card:hover::after{opacity:1}
.pillar-card.featured,.option-grid .selected,.blue-card{--spot:255,255,255}
.pillar-card:hover{border-color:rgba(var(--glow-rgb),.35)}
.pillar-card:hover b,.services-grid article:hover b,.services-grid h3 a:hover{color:var(--glow)}
.contrast-card.muted-card:hover,.option-grid article:not(.selected):hover,.seo-cards article:hover{border-color:var(--accent-line)}
.seo-cards article:hover{translate:0 -3px}

/* Process line: draws from the start edge, nodes light up in order (JS adds .is-in) */
.process-line::before{transform-origin:100% 50%}

/* Form and scheduling: state feedback */
.ticket-form label:focus-within{color:var(--electric)}
.date-btn:hover,.slot-btn:hover{border-color:var(--glow)}
.date-btn.active:hover,.slot-btn.active:hover{border-color:var(--electric)}
.selection.is-set{border-color:var(--electric);background:color-mix(in srgb, var(--electric) 8%, transparent);color:var(--ink)}
.slot-skeleton{display:block;width:62px;height:40px;background:var(--sunken);border:1px solid var(--line-strong);opacity:.6}
.btn[aria-busy="true"]{cursor:progress}
.btn[aria-busy="true"]::before{content:"";width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;margin-inline-end:10px;flex:none}
.riyadh-now{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-100);margin-top:-6px}
.riyadh-now::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--glow);box-shadow:0 0 10px var(--glow);flex:none}
.schedule-card{position:relative;isolation:isolate;overflow:hidden}
.schedule-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,rgba(var(--glow-rgb),.5) 1px,transparent 1.5px);background-size:22px 22px;opacity:.18;-webkit-mask-image:radial-gradient(circle at 0 0,#000,transparent 55%);mask-image:radial-gradient(circle at 0 0,#000,transparent 55%)}

@media (max-width:980px){.hero::after{-webkit-mask-image:radial-gradient(ellipse 80% 42% at 50% 22%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 80% 42% at 50% 22%,#000 0%,transparent 72%)}}
@media print{[data-reveal]{opacity:1!important}}

/* Everything that moves lives here, so reduced-motion users get the original static page. */
@media (prefers-reduced-motion:no-preference){
.nav-wrap{transition:border-color var(--dur-small) var(--ease-out-quart),box-shadow var(--dur-small) var(--ease-out-quart)}
.nav-links a{transition:color var(--dur-micro) var(--ease-out-quart)}
.nav-links a::after{transition:transform var(--dur-small) var(--ease-out-quart)}
.mobile-menu summary span{transition:transform var(--dur-small) var(--ease-out-quart)}
.mobile-menu nav a{transition:background-color var(--dur-micro) var(--ease-out-quart)}
.mobile-menu[open] nav{animation:menu-in var(--dur-small) var(--ease-out-quart) both}
.hero-spot{transition:transform 520ms var(--ease-out-quart),opacity var(--dur-medium) var(--ease-out-quart)}
.art-mark,.art-orbits,.art-particles,.art-glow{transition:translate var(--dur-large) var(--ease-out-quart)}
.art-mark{translate:calc(var(--px)*14px) calc(var(--py)*12px)}
.art-orbits{translate:calc(var(--px)*-9px) calc(var(--py)*-7px)}
.art-particles{translate:calc(var(--px)*24px) calc(var(--py)*20px)}
.art-glow{translate:calc(var(--px)*6px) calc(var(--py)*6px)}
.mk-outer,.mk-inner{stroke-dasharray:1;stroke-dashoffset:1;animation:mk-draw 1.25s var(--ease-in-out-quart) .15s forwards}
.mk-inner{animation-duration:.95s;animation-delay:.55s}
.mk-dot{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(0);animation:mk-pop .55s var(--ease-out-back) forwards}
.mk-dot:nth-of-type(3){animation-delay:1.2s}.mk-dot:nth-of-type(2){animation-delay:1.35s}.mk-dot:nth-of-type(1){animation-delay:1.5s}
.hero-stages li{transition:color var(--dur-small) var(--ease-out-quart)}
.hero-stages li::after{transition:opacity var(--dur-small) var(--ease-out-quart),transform 0s linear var(--dur-small)}
.hero-stages li.is-live::after{transition:opacity var(--dur-micro) var(--ease-out-quart),transform 2.3s linear}
[data-reveal]{opacity:0}
/* A keyboard user can reach a row before its observer has fired. Focus reveals it
   outright rather than leaving them on something half-transparent. */
[data-reveal]:focus-within{opacity:1;animation:none}
[data-reveal].in{opacity:1;animation:reveal-up 600ms var(--ease-out-expo) backwards;animation-delay:calc(var(--i,0)*70ms)}
.process-line::before{transform:scaleX(0);transition:transform 1.2s var(--ease-in-out-quart) .15s}
.process-line.is-in::before{transform:scaleX(1)}
.process-line span{transition:border-color var(--dur-medium) var(--ease-out-quart),color var(--dur-medium) var(--ease-out-quart),box-shadow var(--dur-medium) var(--ease-out-quart)}
.process-line:not(.is-in) span{border-color:var(--mist);color:var(--steel)}
.process-line.is-in span{box-shadow:0 0 0 4px color-mix(in srgb, var(--electric) 8%, transparent)}
.process-line article:nth-child(2) span{transition-delay:.35s}.process-line article:nth-child(3) span{transition-delay:.6s}.process-line article:nth-child(4) span{transition-delay:.85s}
.spot-card::before,.spot-card::after{transition:opacity var(--dur-small) var(--ease-out-quart)}
.spot-card,.spot-card b,.services-grid h3 a{transition:border-color var(--dur-small) var(--ease-out-quart),color var(--dur-micro) var(--ease-out-quart),translate var(--dur-small) var(--ease-out-quart)}
.btn{transition:transform var(--dur-micro) var(--ease-out-quart),background-color var(--dur-micro) var(--ease-out-quart),border-color var(--dur-micro) var(--ease-out-quart),box-shadow var(--dur-small) var(--ease-out-quart)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:60ms}
.btn-blue:hover{box-shadow:0 10px 26px -10px color-mix(in srgb, var(--electric) 30%, transparent)}
.ticket-form label{transition:color var(--dur-micro) var(--ease-out-quart)}
.ticket-form input,.ticket-form textarea,.ticket-form select{transition:border-color var(--dur-micro) var(--ease-out-quart),box-shadow var(--dur-small) var(--ease-out-quart)}
.date-btn,.slot-btn{transition:background-color var(--dur-micro) var(--ease-out-quart),border-color var(--dur-micro) var(--ease-out-quart),transform var(--dur-micro) var(--ease-out-quart)}
.date-btn:active,.slot-btn:active{transform:scale(.96)}
.selection{transition:border-color var(--dur-small) var(--ease-out-quart),background-color var(--dur-small) var(--ease-out-quart),color var(--dur-small) var(--ease-out-quart)}
.success:not([hidden]){animation:rise-in 380ms var(--ease-out-expo) both}
.schedule-next:not([hidden]){animation:rise-in 320ms var(--ease-out-expo) both}
.slot-skeleton{animation:pulse 1s var(--ease-in-out-quart) infinite alternate}
.slot-skeleton:nth-child(2){animation-delay:.1s}.slot-skeleton:nth-child(3){animation-delay:.2s}.slot-skeleton:nth-child(4){animation-delay:.3s}.slot-skeleton:nth-child(5){animation-delay:.4s}
.riyadh-now::before{animation:blink 2.4s var(--ease-in-out-quart) infinite}
.btn[aria-busy="true"]::before{animation:spin .8s linear infinite}
}
@keyframes mk-draw{to{stroke-dashoffset:0}}
@keyframes mk-pop{to{opacity:1;transform:scale(1)}}
@keyframes reveal-up{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@keyframes rise-in{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pulse{from{opacity:.35}to{opacity:.9}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes spin{to{transform:rotate(1turn)}}