/* =====================================================================
   i-Rove — Creative Graphic Designer
   One system: movement, perspective, connection, bilingual intelligence.
   Everything below derives from three decisions:
     1. one fluid base (--b)
     2. one ratio (1.25) for every type size
     3. one spacing scale and one line language, both derived from --b
   ===================================================================== */

@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/Manrope-Variable.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexSansArabic-Regular.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexSansArabic-Medium.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/IBMPlexSansArabic-Bold.ttf') format('truetype')}

:root{
  /* Colour — brand pair plus the existing neutrals only */
  --blue:#CAF4FF; --ink:#000000; --paper:#f5f6f0; --muted:#686c62;
  --rule:#a6aa9e; --rule-faint:#d6d8ce; --rule-dark:#565a50;

  /* Base: 16px → 17px @1440 → 20px @2560, capped (50% zoom renders at the cap) */
  --b:clamp(16px, calc(13.14px + .268vw), 20px);

  /* Type scale — ratio 1.25. Every size on the page is one of these. */
  --t-label:calc(var(--b) * .8);      /* step -1  eyebrows, labels, utility   */
  --t-body: var(--b);                  /* step  0  body, nav, buttons, fields  */
  --t-lead: calc(var(--b) * 1.25);     /* step  1  lead, subheads, lists       */
  --t-h3:   calc(var(--b) * 1.5625);   /* step  2  h3, brand, caps statements  */
  --t-h4:   calc(var(--b) * 1.953);    /* step  3  questions, craft            */
  --t-sub:  calc(var(--b) * 2.441);    /* step  4  perspective statement       */
  --t-d2:   min(calc(var(--b) * 3.052), 6.4vw);  /* step 5  section display    */
  --t-d1:   min(calc(var(--b) * 4.768), 9vw);    /* step 7  statement display  */
  --ar:1.08;                           /* Plex Arabic optical size compensation */

  /* Tracking — tighter as size grows; caps and labels open up */
  --tr-d:-.05em; --tr-h:-.035em; --tr-s:-.02em; --tr-caps:.02em; --tr-label:.1em;

  /* Spacing — multiples of the base */
  --s-1:calc(var(--b) * .5);
  --s-2:var(--b);
  --s-3:calc(var(--b) * 1.5);
  --s-4:calc(var(--b) * 2);
  --s-5:calc(var(--b) * 3);
  --s-6:calc(var(--b) * 4);
  --s-7:calc(var(--b) * 6);

  /* Layout — measure and container scale with the type */
  --max:calc(var(--b) * 84.7);         /* 1440 @17px, 1694 @20px */
  --gutter:4.5%;
  --inset:max(var(--gutter), calc((100% - var(--max)) / 2));
  --measure:34em;

  /* Line language — one stroke, one node, used by every route */
  --line:1px;
  --node:calc(var(--b) * .5);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--s-4)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Manrope','IBM Plex Sans Arabic',sans-serif;font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
p{max-width:var(--measure)}
[lang="ar"],[dir="rtl"]{font-family:'IBM Plex Sans Arabic','Manrope',sans-serif;letter-spacing:0}

/* ---------------------------------------------------------------------
   Roles
   --------------------------------------------------------------------- */
.eyebrow,.section-label,.header-note,.side-note,.count,
.service>span,summary span,.footer-bottom>span{
  font-family:'Manrope',sans-serif;font-size:var(--t-label);font-weight:600;
  letter-spacing:var(--tr-label);line-height:1.4;
}
h1,h2,.junior h2,.ai h2,footer>p{
  font-family:'Manrope',sans-serif;font-weight:500;margin:0;
}
h1,.junior h2,.ai h2,footer>p{font-size:var(--t-d1);line-height:1.02;letter-spacing:var(--tr-d)}
h2{font-size:var(--t-d2);line-height:1.05;letter-spacing:var(--tr-d);margin-bottom:var(--s-5)}
h3{font-family:'Manrope',sans-serif;font-size:var(--t-h3);font-weight:500;line-height:1.15;letter-spacing:var(--tr-s);margin:0}
.lead{font-size:var(--t-lead);line-height:1.3;letter-spacing:var(--tr-s)}

/* Highlight: the word swaps to the opposite brand colour. Same size,
   same weight, same baseline as its sentence — colour is the only change. */
em{font-style:normal;font-weight:inherit}
/* The block is sized to the line box, not the font box, so it never
   collides with the line above or below at tight display leading. */
.hero h1 em,.junior h2 em,footer>p em,.work-section h2 em{display:inline-block;line-height:.92;padding:.02em .1em .1em;margin-inline:-.02em}
.hero h1 em,.junior h2 em,footer>p em{background:var(--ink);color:var(--blue)}
.work-section h2 em{background:var(--blue)}
.ai h2 em{color:var(--blue);padding:0;margin:0}

/* Buttons share the nav voice: body size, one weight up */
.button{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;border:var(--line) solid var(--ink);
  padding:0 var(--s-3);min-height:calc(var(--b) * 3.25);font:600 var(--t-body)/1 'Manrope',sans-serif;letter-spacing:-.005em;cursor:pointer;transition:background .2s,color .2s}
.button:hover{background:var(--blue);color:var(--ink)}
.button:disabled{cursor:wait;opacity:.7}

/* Surfaces share one inner edge */
header,.hero,.manifesto,.section,footer{padding-inline:var(--inset)}

/* ---------------------------------------------------------------------
   Header — same surface as the hero, so the hero is no longer a poster
   --------------------------------------------------------------------- */
header{display:flex;align-items:center;gap:var(--s-6);background:var(--blue);padding-block:var(--s-3);border-bottom:var(--line) solid var(--ink)}
.brand{font-family:'Manrope',sans-serif;font-size:var(--t-h3);font-weight:700;letter-spacing:-.05em;line-height:1}
.brand span{font-size:.35em;vertical-align:top;letter-spacing:0;margin-left:.15em;font-weight:600}
.header-note{margin-right:auto}
.small-link{font-size:var(--t-body);font-weight:500;display:inline-flex;align-items:center;gap:var(--s-2)}
.count{background:var(--ink);color:var(--blue);padding:.3em .6em;letter-spacing:.04em}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero{position:relative;background:var(--blue);padding-block:var(--s-4) var(--s-6);overflow:hidden}
.eyebrow{display:flex;justify-content:space-between;gap:var(--s-2)}
.hero h1{position:relative;z-index:2;margin:var(--s-6) 0 var(--s-5)}
.period{color:var(--ink)}
.hero-bottom{display:flex;align-items:flex-end;gap:var(--s-6);position:relative;z-index:2}
.hero-bottom p{margin:0;line-height:1.65;flex:0 1 var(--measure)}
.hero-bottom strong{display:inline-block;margin-top:var(--s-2);font-weight:700}
.hero-bottom .button{flex-shrink:0}
.hero-bottom .button:hover{background:#fff}
/* Out of flow: the vertical label must not set the height of the row */
.side-note{position:absolute;right:0;bottom:0;writing-mode:vertical-rl;white-space:nowrap}

/* Route: starts at the cap line of the headline, ends level with the CTA.
   Inset from the edge so the vertical label sits beside it, not under it. */
.hero-route{position:absolute;z-index:0;pointer-events:none;
  right:calc(var(--inset) + var(--s-4));
  top:calc(var(--s-4) + var(--t-label) * 1.4 + var(--s-6) + var(--t-d1) * .22);
  bottom:calc(var(--s-6) + var(--b) * 1.625);
  width:clamp(160px, 18%, calc(var(--b) * 14));
  border-top:var(--line) solid var(--ink);border-right:var(--line) solid var(--ink)}
.hero-route:after{content:'';position:absolute;right:0;bottom:0;width:55%;border-bottom:var(--line) solid var(--ink)}
.hero-route span,.hero-route b{position:absolute;background:var(--ink);width:var(--node);height:var(--node);border-radius:50%}
.hero-route span{top:calc(var(--node) / -2);left:calc(var(--node) / -2)}
.hero-route b{right:55%;bottom:calc(var(--node) / -2);margin-right:calc(var(--node) / -2)}
.hero-route i{position:absolute;right:calc(var(--node) / -2 - .5px);top:48%;width:var(--node);height:var(--node);background:var(--blue);border:var(--line) solid var(--ink)}

/* ---------------------------------------------------------------------
   Manifesto strip
   --------------------------------------------------------------------- */
.manifesto{background:var(--ink);color:var(--blue);padding-block:var(--s-3);font-size:var(--t-lead);font-weight:600;letter-spacing:var(--tr-caps);line-height:1.3}
.manifesto span{color:#fff;margin-left:var(--s-3)}

/* ---------------------------------------------------------------------
   Sections — one rhythm everywhere
   --------------------------------------------------------------------- */
.section{padding-block:var(--s-7);border-bottom:var(--line) solid var(--rule-faint)}
.section-label{display:block;margin-bottom:var(--s-4)}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-6)}
.two-col>*{min-width:0}
.two-col p:first-child{margin-top:0}
.muted{color:var(--muted)}
.crossed{text-decoration:line-through}
.path{font-weight:600}

/* 01 — sequence: nodes sit on the line, under the first letter of each word */
.sequence{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-2);
  font-family:'Manrope',sans-serif;font-weight:600;font-size:var(--t-h3);letter-spacing:var(--tr-caps);line-height:1.1;
  padding:var(--s-4) 0 var(--s-6);margin-bottom:var(--s-5)}
.sequence:after{content:'';position:absolute;left:0;right:0;bottom:var(--s-3);border-top:var(--line) solid var(--ink)}
.sequence>span{white-space:nowrap}
.sequence>span:before{content:'';position:absolute;width:var(--node);height:var(--node);border-radius:50%;background:var(--ink);
  bottom:calc(var(--s-3) - var(--node) / 2 + var(--line) / 2)}
.sequence>span:nth-of-type(2),.sequence>span:nth-of-type(4){margin-top:calc(var(--b) * .75)}
.sequence>span:nth-of-type(3){margin-top:calc(var(--b) * 1.5)}
.sequence b{font-weight:400;font-size:var(--t-lead);margin-top:calc(var(--b) * .9)}

/* 02 — junior */
.junior{background:var(--blue)}
.junior h2{margin:0}
.junior h2 em{margin-inline-start:-.1em} /* hangs at line start so the letters, not the block, align */
.junior .lead{margin-top:0}
.counts{display:flex;flex-direction:column;font-size:var(--t-lead);line-height:1.7;letter-spacing:var(--tr-s);margin:var(--s-4) 0}
.counts strong{margin-top:var(--s-2);border-top:var(--line) solid var(--ink);padding-top:var(--s-2);font-weight:600}

/* 03 — values */
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s-5)}
.principles article{border-top:var(--line) solid var(--rule);padding:var(--s-3) 0 var(--s-5)}
.principles article>span{font-size:var(--t-label);font-weight:600;letter-spacing:var(--tr-label);color:var(--muted)}
.principles h3{letter-spacing:0;margin:var(--s-3) 0 var(--s-2);min-height:2.3em}
.principles p{margin:0;max-width:20em}
.craft{border-top:var(--line) solid var(--ink);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-3);padding:var(--s-4) 0;margin:var(--s-2) 0 var(--s-2)}
.craft p{font-family:'Manrope',sans-serif;font-size:var(--t-h4);font-weight:500;line-height:1.1;letter-spacing:var(--tr-h);margin:0}
.craft span{font-size:var(--t-lead);line-height:1.3;letter-spacing:var(--tr-s);max-width:11em}
.tools{color:var(--muted);margin:0;max-width:none}

/* 04 — AI */
.ai{background:var(--ink);color:var(--paper)}
.ai .section-label{color:var(--blue)}
.ai h2{margin-bottom:var(--s-4)}
.questions{margin:var(--s-5) 0}
.questions p{font-family:'Manrope',sans-serif;font-size:var(--t-h4);font-weight:500;letter-spacing:var(--tr-h);line-height:1.2;border-bottom:var(--line) solid var(--rule-dark);padding:var(--s-2) 0;margin:0;max-width:none}
.questions p:last-child{color:var(--blue)}

/* 05 — world of i-Rove: same node, same stroke as the hero route */
.ecosystem{position:relative;isolation:isolate;margin-top:var(--s-6);padding:var(--s-5) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.ecosystem-line{position:absolute;z-index:-1;left:0;width:100%;top:var(--s-5);border-top:var(--line) solid var(--ink)}
.service{position:relative;padding-top:var(--s-4)}
.service:before{content:'';position:absolute;top:calc(var(--node) / -2 + var(--line) / 2);left:0;width:var(--node);height:var(--node);border-radius:50%;background:var(--ink)}
.service:nth-of-type(3){padding-top:calc(var(--b) * 4.5)}
.service:nth-of-type(4){padding-top:calc(var(--b) * 7)}
.service:nth-of-type(3):after,.service:nth-of-type(4):after{content:'';position:absolute;top:0;left:calc(var(--node) / 2 - var(--line) / 2);border-left:var(--line) solid var(--ink);height:calc(var(--b) * 3.5)}
.service:nth-of-type(4):after{height:calc(var(--b) * 6)}
.service>span{display:inline-block;background:var(--blue);padding:.45em .8em;transition:background .2s,color .2s}
.service:hover>span{background:var(--ink);color:var(--blue)}
.service h3{margin-top:var(--s-2)}
.ecosystem-caption{grid-column:1/-1;font-size:var(--t-label);color:var(--muted);margin:var(--s-3) 0 0}

/* Perspective — bilingual pair at one optical size */
.perspective{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);display:grid;grid-template-columns:1fr 1fr;min-height:calc(var(--b) * 26)}
.perspective-en,.perspective-ar{position:relative;display:flex;align-items:center;padding-block:var(--s-7)}
.perspective{--inset-v:max(4.5vw, calc((100vw - var(--max)) / 2))}
.perspective-en{color:var(--blue);padding-inline:var(--inset-v) var(--s-6)}
.perspective-ar{background:var(--blue);color:var(--ink);padding-inline:var(--inset-v) var(--s-6)}
.perspective-en p{font-family:'Manrope',sans-serif;font-size:var(--t-sub);font-weight:500;line-height:1.12;letter-spacing:var(--tr-h);margin:0}
.perspective-ar p{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:calc(var(--t-sub) * var(--ar));font-weight:500;line-height:1.55;letter-spacing:0;margin:0}
.perspective-connector{position:absolute;top:var(--s-4);left:45%;width:10%;height:var(--s-4);border-left:var(--line) solid var(--blue);border-bottom:var(--line) solid var(--blue);pointer-events:none}
.perspective-connector:after{content:'';position:absolute;left:50%;top:var(--s-4);width:100%;height:var(--s-4);border-top:var(--line) solid var(--ink);border-right:var(--line) solid var(--ink)}

/* 06 — application */
.application-heading{display:flex;justify-content:space-between;gap:var(--s-6)}
.application-heading>*{min-width:0}
.application-heading p{margin:0;line-height:1.7;flex:0 0 auto;max-width:22em}
.application-heading strong{display:block;margin-top:var(--s-2);font-weight:700}
form{max-width:calc(var(--b) * 54);margin:var(--s-4) auto 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.wide{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:var(--s-1);font-size:var(--t-body);font-weight:600}
input,textarea{border:0;border-bottom:var(--line) solid var(--rule);background:transparent;padding:var(--s-2) 0;font:400 var(--t-body)/1.55 'Manrope','IBM Plex Sans Arabic',sans-serif;color:var(--ink);border-radius:0;min-width:0;max-width:100%}
textarea{resize:vertical}
input:focus,textarea:focus{outline:0;border-bottom:2px solid var(--ink)}
input::placeholder,textarea::placeholder{color:#75786f}
form h3{margin:var(--s-6) 0 var(--s-4)}
details{margin-top:var(--s-5);border-top:var(--line) solid var(--rule);border-bottom:var(--line) solid var(--rule);padding:var(--s-3) 0}
summary{cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);list-style:none;font-size:var(--t-lead);font-weight:500;letter-spacing:var(--tr-s)}
summary::-webkit-details-marker{display:none}
details .form-grid{padding:var(--s-4) 0 var(--s-2)}
small{font-size:var(--t-label);color:var(--muted);font-weight:400;line-height:1.5;max-width:40em}
.submit-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-4)}
.submit-row p{font-size:var(--t-label);color:var(--muted);margin:0}
#form-status{padding:0;max-width:none}
#form-status:not(:empty){padding:var(--s-3);background:var(--blue)}

/* Footer — bookends the hero: same display size, same highlight */
footer{background:var(--blue);padding-block:var(--s-7) var(--s-4)}
footer>p{margin:var(--s-4) 0 var(--s-6);max-width:none}
.footer-bottom{border-top:var(--line) solid var(--ink);padding-top:var(--s-3);display:flex;justify-content:space-between;align-items:center;gap:var(--s-3)}
.footer-bottom>a:last-child{font-size:var(--t-body);font-weight:500}

/* Focus */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
.ai a:focus-visible,.perspective a:focus-visible{outline-color:var(--blue)}

/* ---------------------------------------------------------------------
   Wide desktop — layout only; sizes already come from the scale
   --------------------------------------------------------------------- */
@media (min-width:1200px){
  .sequence{display:grid;
    grid-template-columns:auto minmax(16px,1fr) auto minmax(16px,1fr) auto minmax(16px,1fr) auto minmax(16px,1fr) auto;
    column-gap:var(--s-2)}
  .sequence>b{justify-self:center}
  .junior .two-col{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
}

/* ---------------------------------------------------------------------
   Mobile — same roles, compressed display tier
   --------------------------------------------------------------------- */
@media (max-width:760px){
  :root{
    --gutter:6%;
    --t-d1:calc(var(--b) * 2.44);
    --t-d2:calc(var(--b) * 2.25);
    --t-sub:calc(var(--b) * 2.25);
    --t-h4:calc(var(--b) * 1.75);
    --t-h3:calc(var(--b) * 1.5);
  }
  header{padding-block:var(--s-2)}
  .header-note{display:none}
  .small-link{margin-left:auto}
  .hero{padding-block:var(--s-4) var(--s-5)}
  .eyebrow{flex-wrap:wrap;gap:var(--s-1)}
  .hero h1{margin:var(--s-5) 0 var(--s-4);line-height:1.08}
  .hero-bottom{display:block}
  .hero-bottom .button{margin-top:var(--s-4)}
  .side-note{display:none}
  .hero-route{right:4%;top:calc(var(--s-4) + var(--t-label) * 2.8 + var(--s-1) + var(--s-5) + var(--t-d1) * .2);bottom:auto;height:calc(var(--t-d1) * 2.6);width:14%;opacity:.45} /* spans the headline only */
  .hero-route:after{width:90%}
  .hero-route b{right:90%}
  .manifesto{padding-block:var(--s-3);font-size:var(--t-body)}
  .manifesto span{display:block;margin:var(--s-1) 0 0}
  .section{padding-block:var(--s-6)}
  .two-col{grid-template-columns:1fr;gap:var(--s-4)}
  .sequence{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s-3) var(--s-1);padding:var(--s-3) 0 var(--s-4);border-bottom:var(--line) solid var(--ink)}
  .sequence:after,.sequence>span:before{display:none}
  .sequence>span:nth-of-type(n){margin:0;padding:var(--s-1) 0}
  .sequence>span:nth-of-type(3){background:var(--blue);padding:var(--s-1) var(--s-2)}
  .sequence>b{margin:0}
  .sequence>b:nth-of-type(2){transform:rotate(90deg)}
  .sequence>b:nth-of-type(3){transform:rotate(180deg)}
  .principles{grid-template-columns:1fr 1fr;gap:0 var(--s-3)}
  .principles h3{font-size:var(--t-lead)}
  .principles article{padding-bottom:var(--s-3)}
  .craft{flex-direction:column;align-items:flex-start}
  .craft span{max-width:none}
  .questions{margin:var(--s-4) 0}
  .ecosystem{grid-template-columns:1fr;gap:0;padding:0 0 0 var(--s-3);margin-top:var(--s-4)}
  .ecosystem-line{top:0;left:calc(var(--node) / 2);width:0;height:calc(100% - var(--s-5));border-top:0;border-left:var(--line) solid var(--ink)}
  .service:nth-of-type(n){padding:var(--s-3) 0}
  .service:before{left:calc(var(--s-3) * -1 + var(--line) / 2);top:calc(var(--s-3) + var(--t-label) * .9)}
  .service:nth-of-type(n):after{display:none}
  .perspective{grid-template-columns:1fr;min-height:0}
  .perspective-en,.perspective-ar{padding:var(--s-5) var(--gutter);min-height:calc(var(--b) * 14)}
  .perspective-ar{justify-content:flex-end}
  .perspective-connector{left:50%;top:calc(var(--b) * 12.5);width:12%;height:var(--s-4);border-bottom:0}
  .perspective-connector:after{left:0;top:var(--s-4);width:70%;height:var(--s-4);border-top:0;border-right:0;border-left:var(--line) solid var(--ink);border-bottom:var(--line) solid var(--ink)}
  .application-heading{display:block}
  .application-heading h2{margin-bottom:var(--s-3)}
  .application-heading p{margin-bottom:var(--s-5)}
  .form-grid{grid-template-columns:1fr;gap:var(--s-3)}
  .wide{grid-column:auto}
  form h3{margin-top:var(--s-5)}
  .submit-row{display:block}
  .submit-row .button{width:100%;margin-top:var(--s-3)}
  footer{padding-block:var(--s-6) var(--s-3)}
  .footer-bottom{flex-wrap:wrap}
  .footer-bottom>span{display:none}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}