/* self-hosted fonts: Helmet (OFL), HalftoneJo (free licence), 7sn Yad, IBM Plex Sans Arabic (OFL) */
@font-face{font-family:'Helmet';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Helmet-Regular.woff2) format('woff2')}
@font-face{font-family:'HalftoneJo';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/HalftoneJo-subset.woff2) format('woff2')}
@font-face{font-family:'7sn Yad';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/7snYad-Regular.woff2) format('woff2');size-adjust:158%;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  size-adjust: 106%;
  src: url(/fonts/IBMPlexSansArabic-500-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
  size-adjust: 106%;
  src: url(/fonts/IBMPlexSansArabic-600-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
}
:root{
  --bg:#F5F0E6; --card:#FFFFFF; --ink:#1C1A16; --muted:#5E5648; --line:#E3D9C6; --chip:#EFE5D2;
  --gold:#C9973A; --gold-2:#E8B84A; --bronze:#8A4A2E; --green:#1F6B52; --red:#FF4750;
  --font:"Helmet","Segoe UI",system-ui,sans-serif;
  --ar:"7sn Yad","Helmet","IBM Plex Sans Arabic","Geeza Pro","Segoe UI",sans-serif;
  --pix:"Helmet","Segoe UI",system-ui,sans-serif;
  --bubble:"HalftoneJo","Helmet",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;font-synthesis-weight:none}
[dir="rtl"] body{font-family:var(--font)}
[dir="rtl"] .mark,[dir="rtl"] pre,[dir="rtl"] .ltr{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .more svg{scale:-1 1}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.5 var(--font)}
a{color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.sr:focus{position:fixed;z-index:40;top:8px;left:8px;width:auto;height:auto;clip:auto;padding:10px 16px;background:var(--ink);color:var(--bg);border-radius:999px}
html{scroll-padding-top:84px}
.contact :focus-visible{outline-color:var(--gold-2)}
.ar{font-family:var(--ar)}
.pix{font-family:var(--pix)}
.px{shape-rendering:crispEdges}

/* phones: iOS 26 Safari paints its own flat band at a screen edge when something pinned there has a solid background, but lets the page
   show through its glass otherwise. The hero's pinned stage leaves its sky to the drawing, so the scene runs on under the clock and the address bar. */
.stage{background:none !important}
/* opened from the Home Screen: no Safari bars, the page runs under the clock; a soft shade keeps the white clock readable on light pages */
@media (display-mode: standalone){body::before{content:"";position:fixed;z-index:25;left:0;right:0;top:0;height:calc(env(safe-area-inset-top,0px) + 14px);background:linear-gradient(rgba(20,18,14,.3),rgba(20,18,14,0));pointer-events:none}}
/* top bar */
.topbar{position:fixed;z-index:20;top:calc(10px + env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));max-width:1080px;margin:0 auto;height:56px;padding-block:0;padding-inline:18px 6px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,252,245,.97);border:1px solid rgba(205,191,159,.5);border-radius:999px;box-shadow:0 1px 2px rgba(28,26,22,.05),0 10px 24px -14px rgba(28,26,22,.35)}
.topbar .status{margin:0;display:flex;align-items:center;gap:8px;font-size:14px;color:#3D382F;white-space:nowrap}
.dot{width:8px;height:8px;background:var(--green);display:block;flex:none}
.topbar .actions{display:flex;align-items:center;gap:6px}
.iconbtn{width:44px;height:44px;padding:0;display:grid;place-items:center;background:transparent;border:1.5px solid #CDBF9F;border-radius:999px;cursor:pointer;color:var(--ink)}
.pill{min-height:44px;padding:0 16px;display:inline-flex;align-items:center;font-size:14px;font-weight:600;text-decoration:none;background:var(--ink);color:var(--bg);border-radius:999px}
/* the way home: a pill with a gold disc; its pixel arrow runs off to the left every few seconds and comes back in from the right */
.topbar:has(> .home-link){padding-inline:6px}
.home-link{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding-inline:5px 18px;border-radius:999px;background:var(--chip);box-shadow:inset 0 0 0 1px rgba(201,151,58,.32);color:var(--ink);text-decoration:none;font-size:15px;font-weight:600;transition:background-color .2s,scale .15s}
.home-link:hover{background:color-mix(in srgb,var(--chip) 86%,var(--gold))}
.home-link:active{scale:.96}
.home-link svg{flex:none;width:34px;height:34px;padding:8px;border-radius:50%;background:var(--gold);color:#1C1A16;overflow:visible;clip-path:circle(50%)}
.home-link svg rect{animation:home-run 6s 1s infinite}
.home-link:hover svg rect,.home-link:focus-visible svg rect{animation:home-run-now .6s}
.home-link::after{content:"";position:absolute;inset-inline-start:5px;top:50%;width:34px;height:34px;margin-top:-17px;border:2px solid var(--gold);border-radius:50%;opacity:0;pointer-events:none;animation:home-ping 1.4s ease-out .5s 2}
@keyframes home-run{0%{transform:none;animation-timing-function:cubic-bezier(.55,0,1,.45)}8%{transform:translateX(-18px)}8.01%{transform:translateX(18px);animation-timing-function:cubic-bezier(0,.55,.45,1)}17%,100%{transform:none}}
@keyframes home-run-now{0%{transform:none;animation-timing-function:cubic-bezier(.55,0,1,.45)}45%{transform:translateX(-18px)}45.01%{transform:translateX(18px);animation-timing-function:cubic-bezier(0,.55,.45,1)}100%{transform:none}}
@keyframes home-ping{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.75)}}
.still .home-link::after{animation:none}
@media (prefers-reduced-motion:reduce){.home-link svg rect,.home-link::after{animation:none}}


/* wordmark */
.mark{font-weight:450;letter-spacing:.005em;white-space:nowrap;line-height:1;margin:0}
/* Helmet has no dotless i, so the i is drawn: its stem matches Helmet's i (100/1024 wide, x-height tall), its dot is the red square */
.mark .i{position:relative;display:inline-block;width:.234em;height:.64em}
.mark .i::before{content:"";position:absolute;left:.068em;bottom:0;width:.098em;height:.445em;background:currentColor}
.mark .i b{position:absolute;left:.06em;bottom:.525em;width:.115em;height:.115em;background:var(--red)}
.hero .head .mark .i::before{box-shadow:0 0 16px rgba(255,252,245,.7)}

/* sections */
.wrap{max-width:1080px;margin:0 auto;padding-inline:24px}
.body{position:relative;display:flex;flex-direction:column;padding-bottom:0}
.body .line{position:absolute;inset-inline-start:11px;top:0;bottom:0;width:2px;background:var(--gold);transform-origin:top;transform:scaleY(var(--q,1))}
.sec{padding-top:48px;display:flex;flex-direction:column;gap:16px}
.sec h2{position:relative;margin:0;font-size:clamp(24px,3.2vw,32px);font-weight:500;line-height:1.2;text-wrap:balance}
.sec h2::before{content:"";position:absolute;inset-inline-start:-17px;top:.42em;width:10px;height:10px;background:var(--gold)}
/* work and honors pages: each section title sits on a plate, numbered on a gold tile (the home page keeps its timeline markers) */
main{counter-reset:ch}
:not(.body) > .sec > h2:not(.sr){display:flex;align-items:center;gap:14px;width:fit-content;max-width:100%;padding:8px;padding-inline-end:20px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px rgba(28,26,22,.04),0 12px 24px -18px rgba(28,26,22,.45);font-size:clamp(21px,2.8vw,28px)}
:not(.body) > .sec > h2:not(.sr)::before{counter-increment:ch;content:counter(ch,decimal-leading-zero);position:static;flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--gold);color:#1C1A16;font:600 15px/1 var(--pix);letter-spacing:.02em}
.lead{margin:0;color:var(--muted);max-width:62ch}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{min-height:44px;padding:0 16px;border-radius:999px;font:500 15px var(--font);cursor:pointer;background:transparent;color:var(--ink);border:1.5px solid #CDBF9F}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tag{padding:6px 12px;border-radius:999px;background:var(--chip);font-size:13px;display:inline-block}
.grid2{display:grid;gap:18px}
@media (min-width:860px){.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* cards */
.stack{position:relative}
.stack .sheet{position:absolute;inset:0;border-radius:16px;transform:rotate(var(--r,0deg))}
.card{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px;background:var(--card);border:1px solid #E6DCC8;border-radius:16px;text-decoration:none;color:inherit}
a.card{transition:transform .2s ease,box-shadow .2s ease}
a.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(28,26,22,.08)}
.card .head{display:flex;gap:14px;align-items:center}
.tile{width:56px;height:56px;flex:none;display:grid;place-items:center;background:var(--ink);border-radius:10px}
.eyebrow{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.card h3{margin:0;font-size:19px;font-weight:600;line-height:1.25}
.card p{margin:0}
.card .sub{font-size:14px;color:var(--muted)}
.more{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--green)}

/* contact */
.contact{margin-top:56px;background:var(--ink);color:var(--bg)}
.contact .wrap{padding-top:40px;padding-bottom:0;display:flex;flex-direction:column;gap:16px}
.contact h2{margin:0;font-size:clamp(56px,9vw,96px);line-height:.95;font-weight:500;letter-spacing:-.04em}
.btn{min-height:48px;padding:0 22px;display:inline-flex;align-items:center;text-decoration:none;font-weight:600;font-size:16px;border-radius:24px}
.btn.gold{background:var(--gold-2);color:var(--ink)}
.btn.ghost{border:1px solid #6B6255;color:var(--bg);font-weight:500}
.btn.dark{background:var(--ink);color:var(--bg)}
.btn.line{border:1.5px solid var(--ink);color:var(--ink);font-weight:500}
.btnrow{display:flex;flex-wrap:wrap;gap:12px}
/* contact buttons in each service's own colours and marks */
.btn.brand{gap:9px;padding-inline:16px 22px;transition:translate .25s ease,background-color .2s,border-color .2s,box-shadow .2s}
.btn.brand .b-ico{flex:none;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.btn.brand:hover .b-ico,.btn.brand:focus-visible .b-ico{transform:translateY(-2px) rotate(-8deg)}
.b-gmail{background:#C2E7FF;color:#001D35;border-radius:16px}
.b-gmail:hover{background:#D3EEFF;box-shadow:0 1px 3px 1px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.3)}
.b-in{background:#0A66C2;color:#fff}
.b-in:hover{background:#004182}
.b-gh{background:#0D1117;color:#F0F6FC;border:1px solid #3D444D;border-radius:6px}
.b-gh:hover{background:#151B23;border-color:#656C76}
.gh-grid{flex:none;margin-inline-start:2px;direction:ltr}
.gh-grid rect{fill:var(--gc);animation:gh-lit 4.2s ease-in-out infinite;animation-delay:calc(var(--i) * 110ms)}
.gh-grid .l0{--gc:#262C36}.gh-grid .l1{--gc:#0E4429}.gh-grid .l2{--gc:#006D32}.gh-grid .l3{--gc:#26A641}.gh-grid .l4{--gc:#39D353}
@keyframes gh-lit{0%,16%,100%{fill:var(--gc)}8%{fill:#7EE787}}
footer.foot{font-size:13px;color:#A99F8C}

/* showcase pages */
.case-hero{padding-top:96px;display:flex;flex-direction:column;gap:14px}
.case-hero h1{margin:0;font-size:clamp(40px,7vw,76px);line-height:1;font-weight:500;letter-spacing:-.03em}
.case-hero .lead{font-size:19px}
.shot{margin:0;display:flex;flex-direction:column;gap:8px}
.shot img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);background:#fff}
.shot figcaption{font-size:14px;color:var(--muted)}
.facts{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:860px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fact{padding:14px 16px;background:var(--card);border:1px solid #E6DCC8;border-radius:14px}
.fact b{display:block;font-size:24px;font-weight:600;line-height:1.1}
.fact span{font-size:13px;color:var(--muted)}
.steps{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start}
.steps .n{width:32px;height:32px;display:grid;place-items:center;background:var(--ink);color:var(--bg);font:600 14px var(--pix);border-radius:8px}

@keyframes m-wave{0%,60%,100%{transform:translateY(0)}64%{transform:translateY(-.1em)}68%{transform:translateY(0)}}
@keyframes m-hop{0%,64%,100%{transform:translateY(0)}70%{transform:translateY(-.38em)}76%{transform:translateY(0)}80%{transform:translateY(-.1em)}84%{transform:translateY(0)}}
@keyframes m-blink{0%,49%{opacity:1}50%,100%{opacity:.2}}
@keyframes m-sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes m-lift{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-4px) rotate(var(--r,0deg))}}
@keyframes m-bar{0%,10%{transform:scaleY(.25)}40%,90%{transform:scaleY(1)}100%{transform:scaleY(.25)}}
@keyframes m-bump{0%,70%,100%{transform:translateY(0)}78%{transform:translateY(-3px)}86%{transform:translateY(0)}}
@keyframes m-shuffle{0%,70%,100%{transform:translate(0,0)}82%{transform:translate(2px,-2px)}}
@keyframes m-swing{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes m-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes m-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes m-under{0%{transform:scaleX(0)}35%,100%{transform:scaleX(1)}}
@keyframes m-flip{0%,70%,100%{transform:scaleX(1)}80%{transform:scaleX(0)}90%{transform:scaleX(1)}}
.m-l{display:inline-block;animation:m-wave 4.5s ease-in-out infinite}
.m-hop{animation:m-hop 4.5s ease-in-out infinite}
.m-blink{animation:m-blink 1.4s infinite}
.m-sway{animation:m-sway 3.6s ease-in-out infinite}
.stack .sheet{animation:m-lift 3.2s ease-in-out infinite}
.m-bar{transform-box:fill-box;transform-origin:bottom;animation:m-bar 3s steps(4) infinite}
.m-bump{animation:m-bump 2.4s infinite}
.m-shuffle{animation:m-shuffle 3s ease-in-out infinite}
.m-swing{animation:m-swing 2.4s ease-in-out infinite}
.m-nudge{animation:m-nudge 1.6s ease-in-out infinite}
.m-bob{animation:m-bob 2.2s ease-in-out infinite}
.m-under{transform-origin:left center;animation:m-under 4s cubic-bezier(.2,.8,.2,1) infinite}
.m-flip{transform-box:fill-box;transform-origin:center;animation:m-flip 3s infinite}
.still *:not(.sc), .still *::before{animation:none !important}
@media (prefers-reduced-motion:reduce){*,*::before{animation:none !important;transition:none !important}}

/* ---------- page-corner peel: "under the hood" ---------- */
.peel{position:fixed;inset:0;z-index:30;pointer-events:none;visibility:hidden;transition:visibility 0s .5s}
.near-end .peel,.peel.on{visibility:visible;transition:none}
.hood,.flap{--d:0px;transition:clip-path .45s cubic-bezier(.65,0,.25,1),background-size .45s cubic-bezier(.65,0,.25,1)}
.near-end .hood,.near-end .flap{--d:64px;transition-duration:.7s}
html.near-end:not(.hood-open) .peel-btn:is(:hover,:focus-visible) ~ .peel :is(.hood,.flap){--d:calc(64px + 4.3vmax);transition-duration:.4s}
.peel.on .hood,.peel.on .flap{--d:calc(64px + 240vmax);transition-duration:.95s}
.hood{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;background:#0E1013;color:#D7DCE3;font:15px/1.65 ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;clip-path:polygon(calc(100% - var(--d)) 100%,100% calc(100% - var(--d)),100% 100%);pointer-events:none}
.peel.on .hood{pointer-events:auto}
.flapwrap{position:absolute;inset:0;pointer-events:none;filter:drop-shadow(-5px -5px 9px rgba(28,26,22,.28))}
.flap{position:absolute;inset:0;background:linear-gradient(to top left,#FFFDF7 50%,#F1E9D8 68%,#D5C7AB 100%) no-repeat 100% 100%/var(--d) var(--d);clip-path:polygon(calc(100% - var(--d)) 100%,100% calc(100% - var(--d)),calc(100% - var(--d)) calc(100% - var(--d)))}
.peel-btn{position:fixed;z-index:31;right:0;bottom:0;width:76px;height:76px;padding:0;background:transparent;border:0;cursor:pointer;clip-path:polygon(100% 0,100% 100%,0 100%);opacity:0;visibility:hidden}
.near-end .peel-btn{opacity:1;visibility:visible}
.hood-open .peel-btn{visibility:hidden}
.peel-tip{position:fixed;z-index:31;right:84px;bottom:18px;padding:6px 12px;border-radius:999px;background:var(--ink);color:var(--bg);font:12px var(--pix);opacity:0;transform:translateX(6px);transition:opacity .2s,transform .2s;pointer-events:none}
@media (hover:hover){html:not(.hood-open) .peel-btn:hover + .peel-tip{opacity:1;transform:none}}
html:not(.hood-open) .peel-btn:focus-visible + .peel-tip{opacity:1;transform:none}
html.hood-open{overflow:hidden}
.hood-in{max-width:880px;margin:0 auto;padding:calc(128px + env(safe-area-inset-top,0px)) 24px 64px;display:flex;flex-direction:column;gap:22px}
@media (max-width:760px){.hood-in{padding-top:calc(164px + env(safe-area-inset-top,0px))}}
.hood h2{margin:0;font:600 clamp(30px,5vw,48px)/1.05 var(--font);color:#fff;letter-spacing:-.02em}
.hood p{margin:0;max-width:66ch}
.hood .k{color:#7CD3A6}
.hood .c{color:#8A93A3}
.hood .y{color:#E8B84A}
.hood .r{color:#FF8A8A}
.hood-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
@media (min-width:760px){.hood-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hood-stats div{padding:12px 14px;border:1px solid #262B33;border-radius:10px}
.hood-stats dt{font-size:12px;color:#8A93A3}
.hood-stats dd{margin:2px 0 0;font-size:22px;color:#fff}
.hood pre{margin:0;padding:16px;overflow:auto;background:#151820;border:1px solid #262B33;border-radius:10px;font-size:13.5px;line-height:1.6}
.hood ul{margin:0;padding-left:1.2em;display:grid;gap:8px;max-width:72ch}
.hood a{color:#E8B84A}
.hood :focus-visible{outline-color:#E8B84A}
@media (prefers-reduced-motion:reduce){.peel,.hood,.flap,.turn-back,.turn-tip{transition:none!important}}

/* ---------- turn the page back: folded corner, top-left ---------- */
.turn-back{position:absolute;z-index:2;top:0;left:0;width:104px;height:104px;padding:0;border:0;cursor:pointer;background:linear-gradient(to top left,transparent 50%,#FFFDF7 50%,#EFE6D3 74%,#CDBF9F 100%);filter:drop-shadow(4px 4px 7px rgba(0,0,0,.45));opacity:0;visibility:hidden;transition:opacity .15s,visibility 0s .15s,width .25s,height .25s}
.peel.on .turn-back{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease .55s,width .25s,height .25s}
.turn-back:hover,.turn-back:focus-visible{width:128px;height:128px}
.turn-tip{position:absolute;z-index:2;top:110px;left:16px;font:13px var(--font);color:#E8B84A;opacity:0;visibility:hidden;transition:opacity .15s,visibility 0s .15s;pointer-events:none}
.peel.on .turn-tip{opacity:1;visibility:visible;transition:opacity .3s ease .6s}
/* ---------- contact ---------- */
.mail{align-self:center;font-size:16px;color:#D8CDB6;user-select:all;word-break:break-all}
/* ---------- desktop: pixel cursor + magnetic buttons ---------- */
.cursor{position:fixed;z-index:60;left:-5px;top:-5px;opacity:0;width:10px;height:10px;background:var(--red);pointer-events:none;transition:width .2s,height .2s,left .2s,top .2s,background-color .2s,border-color .2s;border:2px solid transparent}
.cursor.big{width:34px;height:34px;left:-17px;top:-17px;background:transparent;border-color:var(--red)}
.btn,.pill,.chip,.iconbtn{transition:translate .25s ease}
/* ---------- headings rise as they scroll in ---------- */
@supports (animation-timeline: view()){.sec h2{animation:h-rise linear both;animation-timeline:view();animation-range:entry 0% entry 80%}}
@keyframes h-rise{from{transform:translateY(.7em)}to{transform:none}}
/* ---------- page turn between pages ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:turn-out .35s cubic-bezier(.6,0,.3,1) both;transform-origin:0 50%}
::view-transition-new(root){animation:turn-in .35s cubic-bezier(.6,0,.3,1) both}
@keyframes turn-out{to{transform:perspective(1800px) rotateY(-32deg) translateX(-10%);opacity:0}}
@keyframes turn-in{from{transform:translateX(14%);opacity:0}}
/* a language switch has its own curtain: no page turn on top of it */
html.wiping::view-transition-old(root),html.wiping::view-transition-new(root){animation:none}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}.sec h2{animation:none}}
.bubble.ht .q span{font-family:var(--bubble);font-size:17px}
[dir="rtl"] .bubble .q span{font-family:var(--ar);font-size:17px}
/* ---------- Arabic: the wordmark stays Latin, the page corners mirror ---------- */
[dir="rtl"] .hero .head .mark{text-align:right}
[dir="rtl"] .hood{clip-path:polygon(var(--d) 100%,0 calc(100% - var(--d)),0 100%)}
[dir="rtl"] .flapwrap{filter:drop-shadow(5px -5px 9px rgba(28,26,22,.28))}
[dir="rtl"] .flap{background:linear-gradient(to top right,#FFFDF7 50%,#F1E9D8 68%,#D5C7AB 100%) no-repeat 0 100%/var(--d) var(--d);clip-path:polygon(var(--d) 100%,0 calc(100% - var(--d)),var(--d) calc(100% - var(--d)))}
[dir="rtl"] .peel-btn{right:auto;left:0;clip-path:polygon(0 0,100% 100%,0 100%)}
[dir="rtl"] .peel-tip{right:auto;left:84px;transform:translateX(-6px)}
[dir="rtl"] .turn-back{left:auto;right:0;background:linear-gradient(to top right,transparent 50%,#FFFDF7 50%,#EFE6D3 74%,#CDBF9F 100%);filter:drop-shadow(-4px 4px 7px rgba(0,0,0,.45))}
[dir="rtl"] .turn-tip{left:auto;right:16px}
[dir="rtl"] .hood ul{padding-left:0;padding-right:1.2em}
html[dir="rtl"]{--font:"IBM Plex Sans Arabic","Helmet","Segoe UI",system-ui,sans-serif;--pix:var(--font)}
[dir="rtl"] *{letter-spacing:0 !important}
[dir="rtl"] .hood{font-family:var(--font)}
[dir="rtl"] .hood .k{font-family:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace}
[dir="rtl"] .hood-stats dd{text-align:right}
[dir="rtl"] .hood .y{white-space:nowrap}
/* ---------- AutoAcad cover (UQU colours, campus photo, the real checklist) ---------- */
.aa-cover{--uqu:#00676F;position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--uqu);isolation:isolate;color:#fff}
@media (min-width:700px){.aa-cover{aspect-ratio:2.3/1}}
.aa-campus{position:absolute;top:0;bottom:0;inset-inline-start:0;width:36%;height:100%;object-fit:cover;object-position:25% 50%}
.aa-cover::before{content:"";position:absolute;z-index:1;top:0;bottom:0;inset-inline-start:0;width:36%;background:linear-gradient(90deg,transparent 45%,var(--uqu))}
[dir="rtl"] .aa-cover::before{background:linear-gradient(-90deg,transparent 45%,var(--uqu))}
.aa-lattice{position:absolute;top:0;bottom:0;inset-inline-end:0;width:64%;color:#fff;opacity:.1}
.aa-brand{position:absolute;z-index:2;top:11%;inset-inline-start:40%;inset-inline-end:5%;display:flex;gap:clamp(10px,1.6vw,18px);align-items:flex-start}
.aa-logo{flex:none;width:clamp(30px,5vw,54px);height:auto}
.aa-brand p{margin:0}
.aa-eyebrow{font-size:clamp(10px,1.25vw,13px);line-height:1.3;color:#E6C67F}
.aa-title{font-size:clamp(30px,5.2vw,60px);line-height:1;letter-spacing:-.02em;margin:.12em 0 .14em !important}
.aa-sub{font-size:clamp(12px,1.45vw,16px);line-height:1.35;opacity:.86;max-width:22ch}
.aa-shot{position:absolute;z-index:2;inset-inline-end:5%;bottom:-46%;width:30%;height:auto;border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.38);transform:rotate(-5deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
[dir="rtl"] .aa-shot{transform:rotate(5deg)}
a.card:hover .aa-shot,a.card:focus-visible .aa-shot{transform:rotate(-2deg) translateY(-8%)}
[dir="rtl"] a.card:hover .aa-shot,[dir="rtl"] a.card:focus-visible .aa-shot{transform:rotate(2deg) translateY(-8%)}
.aa-bar{position:absolute;z-index:2;inset-inline-start:40%;bottom:10%;width:18%;height:5px;border-radius:3px;background:#B08D4A}
.nw{white-space:nowrap}
@media (max-width:520px){.aa-sub{display:none}.aa-shot{width:34%;bottom:-40%}.aa-brand{inset-inline-end:3%}}
/* ---------- FirstCity mark: spreads in from one seed ---------- */
.virus rect{transform-box:fill-box;transform-origin:center}
@supports (animation-timeline: view()){
.stack{view-timeline:--card block}
.virus rect{animation:vir linear both;animation-timeline:--card;animation-range:entry calc(var(--d) * 70%) entry calc(var(--d) * 70% + 22%)}
}
@keyframes vir{0%{opacity:0;transform:scale(0);fill:#7CD3A6}60%{opacity:1;transform:scale(1.5);fill:#7CD3A6}100%{opacity:1;transform:none}}
/* ---------- cards rise in, the paper behind fans out ---------- */
@supports (animation-timeline: view()){
.stack > .card{animation:card-in linear both;animation-timeline:--card;animation-range:entry 0% entry 85%}
.stack > .sheet{animation:sheet-in linear both;animation-timeline:--card;animation-range:entry 20% cover 45%}
.edu{view-timeline:--edu block}
.edu-campus{animation:edu-campus linear both;animation-timeline:--edu;animation-range:entry 0% cover 45%}
.edu-logo{animation:edu-logo linear both;animation-timeline:--edu;animation-range:entry 25% entry 100%}
.edu-name{animation:edu-name linear both;animation-timeline:--edu;animation-range:entry 45% cover 35%}
}
@keyframes card-in{from{translate:0 64px;scale:.95}to{translate:0 0;scale:1}}
@keyframes sheet-in{from{rotate:0deg;translate:0 0}to{rotate:var(--r,0deg);translate:0 6px}}
@keyframes edu-campus{from{translate:-35% 0;scale:1.25}to{translate:0 0;scale:1}}
@keyframes edu-logo{from{translate:0 -70px;opacity:0}70%{translate:0 6px;opacity:1}to{translate:0 0;opacity:1}}
@keyframes edu-name{from{translate:24px 0;opacity:0}to{translate:0 0;opacity:1}}
[dir="rtl"] .edu-campus{animation-name:edu-campus-r}
@keyframes edu-campus-r{from{translate:35% 0;scale:1.25}to{translate:0 0;scale:1}}
@media (prefers-reduced-motion:reduce){.virus rect,.stack > .card,.stack > .sheet,.edu-campus,.edu-logo,.edu-name{animation:none !important}}
/* ---------- Education card ---------- */
.card.edu{padding:0;overflow:hidden;gap:0}
.edu-band{position:relative;height:clamp(110px,18vw,150px);background:#00676F;overflow:hidden;color:#fff;isolation:isolate}
.edu-campus{position:absolute;top:0;inset-inline-start:0;width:42%;height:100%;object-fit:cover;object-position:30% 40%}
.edu-band::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:0;width:42%;background:linear-gradient(90deg,transparent 35%,#00676F)}
[dir="rtl"] .edu-band::after{background:linear-gradient(-90deg,transparent 35%,#00676F)}
.edu-lat{position:absolute;inset:0;color:#fff;opacity:.09}
.edu-logo{position:absolute;z-index:1;top:50%;margin-top:clamp(-38px,-6vw,-28px);inset-inline-start:46%;width:auto;height:clamp(56px,9.5vw,76px)}
.edu-name{position:absolute;z-index:1;top:50%;transform:translateY(-50%);inset-inline-start:calc(46% + clamp(44px,7vw,62px));inset-inline-end:16px;display:flex;flex-direction:column;gap:2px;font-size:clamp(14px,1.9vw,18px);line-height:1.2}
.edu-name span{font-family:var(--ar);opacity:.85}
.edu-row{display:flex;align-items:center;gap:14px;padding:16px 18px}
.tag-honors{background:#1C1A16;color:#E8B84A}
.honors-cta{display:flex;flex-direction:column;align-items:center;gap:0;margin:4px 0 2px}
.honors-cta .point{width:132px;height:auto;mix-blend-mode:multiply;margin-bottom:-4px}
.honors-cta .btn{font-size:17px}
/* ---------- Experience: the companies' own marks and colours, built in as you scroll ---------- */
@property --c{syntax:'<integer>';inherits:false;initial-value:0}
.fc-tile{background:#0F2233}
.fc-logo{position:relative;display:block;width:34px;line-height:0}
.fc-logo img{width:100%;height:auto}
.fc-logo i{position:absolute;left:var(--x);top:var(--y);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#0EA5E9;box-shadow:0 0 6px #0EA5E9;opacity:0}
.fc-dash{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:#0F2233;color:#E6F1F8}
.fc-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#8FB3C9}
.fc-live{display:inline-flex;align-items:center;gap:6px;color:#0EA5E9}
.fc-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#0EA5E9;animation:m-blink 1.6s steps(1) infinite}
.fc-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fc-kpis div{padding:8px 10px;border-radius:10px;background:#16304A}
.fc-kpis b{display:block;font-weight:400;font-size:clamp(20px,2.4vw,26px);line-height:1.1;color:#fff}
.fc-kpis small{font-size:11.5px;color:#8FB3C9}
.fc-chart{width:100%;height:84px}
.fc-bars rect{fill:#1E4A6B;transform-box:fill-box;transform-origin:50% 100%}
.fc-bars rect:nth-child(even){fill:#25618A}
.fc-line{fill:none;stroke:#0EA5E9;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.bsf-tile{background:#fff;box-shadow:inset 0 0 0 1.5px #CFE7E6}
.bsf-tile img{width:34px;height:34px}
.bsf-tl{position:relative;padding:16px 4px 4px;border-radius:14px;background:#002A30;color:#E2F4F3}
.bsf-line{position:absolute;left:24px;right:24px;top:24px;height:3px;background:#0D4A52;border-radius:2px}
.bsf-line i{position:absolute;inset:0;background:#02B9BD;border-radius:2px;transform-origin:left}
[dir="rtl"] .bsf-line i{transform-origin:right}
.bsf-tl ol{position:relative;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.bsf-tl li{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 4px 12px;text-align:center;font-size:12px;line-height:1.25}
.bsf-tl li::before{content:"";width:13px;height:13px;border-radius:50%;background:#02B9BD;box-shadow:0 0 0 4px #002A30;margin-bottom:6px}
.bsf-tl b{font-weight:400;font-size:13px;color:#fff}
.bsf-tl span{color:#91DFDA}
/* ---------- AutoAcad: the live checklist ---------- */
.aa-check{position:absolute;z-index:2;inset-inline-end:5%;bottom:-40%;width:34%;padding:12px 12px 10px;border-radius:10px;background:#fff;color:#1C1A16;box-shadow:0 18px 40px rgba(0,0,0,.38);transform:rotate(-4deg);font-size:clamp(7px,1vw,12px);line-height:1.3}
[dir="rtl"] .aa-check{transform:rotate(4deg)}
.ac-head{display:flex;justify-content:space-between;gap:8px;font:600 .95em ui-monospace,Consolas,monospace}
.ac-head b{flex:none;color:#1F6B52;font:inherit}
.ac-n{display:inline-block}
.ac-bar{height:4px;margin:7px 0 6px;border-radius:2px;background:#E5E7EB;overflow:hidden}
.ac-bar i{display:block;height:100%;background:#1F6B52;transform-origin:left}
[dir="rtl"] .ac-bar i{transform-origin:right}
.aa-check ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.aa-check li{display:flex;align-items:center;gap:6px;padding:3px 0;border-bottom:1px solid #EEF0F2}
.aa-check li i{flex:none;width:.95em;height:.95em;border-radius:3px;border:1.5px solid #1F6B52;background:#1F6B52;box-shadow:inset 0 0 0 2px #fff}
.ac-files{display:flex;gap:6px;margin-top:7px}
.ac-files span{padding:3px 6px;border-radius:5px;background:#F1F5F3;border:1px solid #D7E3DD;font:.9em ui-monospace,Consolas,monospace}
@media (max-width:520px){.aa-check{width:40%;bottom:-62%}}
@supports (animation-timeline: view()){
.fc-logo img{animation:fc-rise linear both;animation-timeline:--card;animation-range:entry 10% entry 70%}
.fc-logo i{animation:fc-node linear both;animation-timeline:--card;animation-range:entry calc(55% + var(--k) * 9%) entry calc(70% + var(--k) * 9%)}
.fc-kpis b .num,.ac-n .num{display:none}
.fc-kpis b,.ac-n{counter-reset:c var(--c);animation:kpi linear both;animation-timeline:--card;animation-range:entry 40% cover 50%}
.fc-kpis b::after,.ac-n::after{content:counter(c)}
.fc-bars rect{animation:fc-bar linear both;animation-timeline:--card;animation-range:entry calc(45% + var(--k) * 5%) entry calc(75% + var(--k) * 5%)}
.fc-line{animation:fc-draw linear both;animation-timeline:--card;animation-range:entry 70% cover 50%}
.bsf-line i{animation:bsf-line linear both;animation-timeline:--card;animation-range:entry 40% cover 50%}
.bsf-tl li{animation:bsf-dot linear both;animation-timeline:--card;animation-range:entry calc(45% + var(--k) * 12%) entry calc(60% + var(--k) * 12%)}
.aa-check{animation:ac-rise linear both;animation-timeline:--card;animation-range:entry 20% cover 60%}
.aa-check li i{animation:ac-tick linear both;animation-timeline:--card;animation-range:entry calc(45% + var(--k) * 5%) entry calc(50% + var(--k) * 5%)}
.ac-bar i{animation:ac-bar linear both;animation-timeline:--card;animation-range:entry 45% cover 52%}
.ac-files span{animation:ac-file linear both;animation-timeline:--card;animation-range:cover 45% cover 55%}
.ac-files span + span{animation-range:cover 50% cover 60%}
}
@keyframes fc-rise{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes fc-node{from{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.8)}to{opacity:1;transform:none}}
@keyframes kpi{from{--c:0}to{--c:var(--to)}}
@keyframes fc-bar{from{transform:scaleY(0)}to{transform:none}}
@keyframes fc-draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes bsf-line{from{transform:scaleX(0)}to{transform:none}}
@keyframes bsf-dot{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes ac-rise{from{translate:0 30%}to{translate:0 -24%}}
@keyframes ac-tick{from{background:#fff}to{background:#1F6B52}}
@keyframes ac-bar{from{transform:scaleX(0)}to{transform:none}}
@keyframes ac-file{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@media (prefers-reduced-motion:reduce){.fc-logo img,.fc-logo i,.fc-kpis b,.ac-n,.fc-bars rect,.fc-line,.bsf-line i,.bsf-tl li,.aa-check,.aa-check li i,.ac-bar i,.ac-files span{animation:none !important}.fc-logo i{opacity:1}.fc-kpis b .num,.ac-n .num{display:inline}.fc-kpis b::after,.ac-n::after{content:none}}
a.card.edu{color:inherit;text-decoration:none}
.fc-logo i{width:4px;height:4px;margin:-2px 0 0 -2px;box-shadow:0 0 4px #0EA5E9}
.xp-fc > .card,.xp-bsf > .card{height:100%}
.xp-fc .more,.xp-bsf .more{margin-top:auto}
/* Arabic page: the checklist is an English screen (ltr), so pin it to the photo-free side by hand */
html[dir="rtl"] .aa-check{inset-inline-end:auto;left:5%;right:auto}
/* ================= logo acts: each organisation builds itself, then its card ================= */
.act{position:relative;height:160vh;height:160svh;view-timeline:--act block}
.act-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,3vh,28px);overflow:hidden}
.act-stage{position:relative;width:min(58vw,280px)}
.act-role{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.act-role b{font-weight:400;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.act-role span{font-size:clamp(19px,2.6vw,26px)}
.act-bsf .act-stage{width:min(78vw,420px)}
/* FirstCity: outline rises, buildings fill in, circuit nodes light up */
.fcb{position:relative;aspect-ratio:2019/1828}
.fcb .b,.fcb .n{position:absolute;display:block}
.fcb .o{position:relative;display:block;width:100%;height:auto}
.fcb .b{transform-origin:50% 100%}
.fcb .n{width:3.2%;aspect-ratio:1;margin:-1.6% 0 0 -1.6%;border-radius:50%;background:#0EA5E9;box-shadow:0 0 12px 4px rgba(14,165,233,.6)}
.fc-word{display:block;width:86%;margin:16px auto 0;aspect-ratio:560/239;background:#283B56;-webkit-mask:url(/img/logos/fc-word-white.webp) center/contain no-repeat;mask:url(/img/logos/fc-word-white.webp) center/contain no-repeat}
/* UQU: the U draws, pillars rise from the middle out, the emblem lands */
.uqub{display:block;width:62%;margin:0 auto;overflow:visible}
.uqub .u{fill:none;stroke:#056C75;stroke-width:22;stroke-linecap:round}
.uqub .p{fill:none;stroke:#056C75;stroke-width:16;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 100%}
.uqu-name{display:flex;flex-direction:column;align-items:center;margin-top:14px;font-family:var(--ar);font-size:clamp(22px,3vw,30px);color:#056C75}
.uqu-name small{font-family:var(--font);font-size:.55em;color:#5E5648;letter-spacing:.06em}
/* BSF: the hexagon draws itself, then fills, then BSF arrives */
.bsfb{display:block;width:100%;overflow:visible}
.bsfb .hex{fill:#002A30;stroke:#002A30;stroke-width:14;stroke-linejoin:round}
.bsfb .lt{fill:#002A30}
/* AutoAcad: the course files fly in and get checked */
.aab{position:relative;width:62%;margin:0 auto;aspect-ratio:1}
.aa-l{position:relative;z-index:2;width:100%;height:auto;display:block;filter:drop-shadow(0 12px 24px rgba(28,26,22,.18))}
.aab .fi{position:absolute;z-index:1;left:30%;top:32%;width:40%;aspect-ratio:.78;display:grid;place-items:end center;padding-bottom:10%;border-radius:6px;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.14);font:600 clamp(10px,1.4vw,13px) var(--font);color:#fff;opacity:0}
.aab .fi::before{content:"";position:absolute;inset:auto 12% 10% 12%;height:26%;border-radius:3px;background:var(--fc)}
.aab .fi{color:#fff}
.aab .fi{isolation:isolate}
.aab .fi::after{content:"";position:absolute;inset:12% 18% 46% 18%;background:repeating-linear-gradient(#E5E7EB 0 3px,transparent 3px 8px)}
.aab .ok{position:absolute;z-index:3;right:-4%;bottom:-2%;width:30%;aspect-ratio:1;border-radius:50%;background:#1F6B52 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/62% no-repeat;box-shadow:0 0 0 6px var(--bg);opacity:0}
@supports (animation-timeline: view()){
.act-stage,.act-role{animation:act-out linear both;animation-timeline:--act;animation-range:contain 62% contain 100%}
.act-role{animation:act-up linear both,act-out linear both;animation-timeline:--act,--act;animation-range:contain 40% contain 55%,contain 62% contain 100%}
.fcb .o{animation:fc-o linear both;animation-timeline:--act;animation-range:entry 45% contain 18%}
.fcb .b{animation:grow-y linear both;animation-timeline:--act;animation-range:contain calc(4% + var(--k) * 6%) contain calc(22% + var(--k) * 6%)}
.fcb .n{animation:node linear both;animation-timeline:--act;animation-range:contain calc(32% + var(--k) * 4%) contain calc(40% + var(--k) * 4%)}
.fc-word{animation:act-up linear both;animation-timeline:--act;animation-range:contain 30% contain 44%}
.uqub .u{animation:draw linear both;animation-timeline:--act;animation-range:entry 45% contain 16%}
.uqub .p{animation:grow-y linear both;animation-timeline:--act;animation-range:contain calc(6% + var(--k) * 5%) contain calc(20% + var(--k) * 5%)}
.uqub .em{animation:land linear both;animation-timeline:--act;animation-range:contain 30% contain 42%}
.uqu-name{animation:act-up linear both;animation-timeline:--act;animation-range:contain 34% contain 46%}
.bsfb .hex{animation:hex linear both;animation-timeline:--act;animation-range:entry 40% contain 30%}
.bsfb .lt{animation:slide-in linear both;animation-timeline:--act;animation-range:contain 28% contain 44%}
.aa-l{animation:pop linear both;animation-timeline:--act;animation-range:entry 50% contain 12%}
.aab .fi{animation:fly linear both;animation-timeline:--act;animation-range:contain 8% contain 34%}
.aab .fi:nth-child(2){animation-range:contain 12% contain 38%}.aab .fi:nth-child(3){animation-range:contain 16% contain 42%}.aab .fi:nth-child(4){animation-range:contain 20% contain 46%}
.aab .ok{animation:pop linear both;animation-timeline:--act;animation-range:contain 46% contain 56%}
}
@supports not (animation-timeline: view()){.act{display:none}}
.reduce .act{display:none}
@media (prefers-reduced-motion:reduce){.act{display:none}}
@keyframes act-out{0%{opacity:1;translate:0 0;scale:1}100%{opacity:0;translate:0 26vh;scale:.32}}
@keyframes act-up{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes fc-o{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes grow-y{from{transform:scaleY(0)}to{transform:none}}
@keyframes node{0%{opacity:0;scale:0}60%{opacity:1;scale:1.9}100%{opacity:1;scale:1}}
@keyframes draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes land{0%{opacity:0;transform:translateY(-140px)}70%{opacity:1;transform:translateY(8px)}100%{opacity:1;transform:none}}
@keyframes hex{0%{fill-opacity:0;stroke-dasharray:1;stroke-dashoffset:1}70%{fill-opacity:0;stroke-dasharray:1;stroke-dashoffset:0}100%{fill-opacity:1;stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes slide-in{from{opacity:0;transform:translateX(160px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;scale:.4}70%{opacity:1;scale:1.08}100%{opacity:1;scale:1}}
@keyframes fly{0%{opacity:0;translate:var(--x) var(--y);rotate:-14deg}25%{opacity:1}85%{opacity:1;translate:0 0;rotate:0deg;scale:.9}100%{opacity:0;translate:0 0;scale:.5}}
/* ================= real mockups ================= */
.logo-tile{background:#fff;box-shadow:inset 0 0 0 1.5px #E2D7C1}
.logo-tile img{width:74%;height:74%;object-fit:contain}
.mk-row{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(14px,3vw,30px);align-items:end;margin:4px 0}
@media (max-width:640px){.mk-row{grid-template-columns:1fr}}
.laptop{margin:0;position:relative;perspective:1400px}
.lt-screen{position:relative;padding:3.2% 3.2% 3.6%;border-radius:14px 14px 4px 4px;background:#0E0E10;box-shadow:inset 0 0 0 1.5px #2A2A2E,0 18px 36px rgba(28,26,22,.22);transform-origin:50% 100%}
.lt-screen::before{content:"";position:absolute;top:1.3%;left:50%;width:.9%;aspect-ratio:1;border-radius:50%;background:#2E3036}
.lt-screen img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:2px;background:#fff}
.lt-base{position:relative;height:clamp(9px,1.5vw,15px);margin:0 -7.5%;border-radius:2px 2px 14px 14px/2px 2px 9px 9px;background:linear-gradient(#ECEEF1,#BFC3C9 55%,#8F949B)}
.lt-base::after{content:"";position:absolute;top:0;left:42%;right:42%;height:42%;border-radius:0 0 7px 7px;background:#C9CDD2}
.docs{position:relative;width:100%;max-width:300px;margin-inline:auto;aspect-ratio:1/1.05}
.doc{position:absolute;left:21%;top:4%;width:58%;height:auto;border-radius:3px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08),0 12px 24px rgba(28,26,22,.16);transform:translateX(var(--x)) rotate(var(--r))}
.browser{border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px #E2D7C1,0 18px 36px rgba(28,26,22,.18)}
.bw-bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;background:#F1F3F5;font-size:11px;color:#5E5648}
.bw-bar i,.mw-bar i{width:8px;height:8px;border-radius:50%;background:#D5D8DC}.bw-bar i:first-child,.mw-bar i:first-child{background:#FF5F57}.bw-bar i:nth-child(2),.mw-bar i:nth-child(2){background:#FEBC2E}.bw-bar i:nth-child(3),.mw-bar i:nth-child(3){background:#28C840}
.bw-bar span{margin-inline-start:10px;flex:1;padding:2px 10px;border-radius:999px;background:#fff;text-align:center}
.browser img{display:block;width:100%;height:auto}
.mail-win{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px #DCE7E6,0 16px 32px rgba(0,42,48,.14);font-size:14px;line-height:1.5}
.mw-bar{display:flex;align-items:center;gap:5px;height:30px;padding:0 12px;background:#002A30;color:#91DFDA;font-size:12px}
.mw-bar span{margin-inline-start:10px}
.mw-head{display:flex;align-items:center;gap:10px;padding:14px 16px 4px}
.mw-av{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#02B9BD;color:#002A30;font-size:16px}
.mw-head b{display:block;font-weight:400}.mw-head small{color:#4F6062;font-size:12px}
.mw-sub{margin:4px 16px 6px;font-size:16px;color:#002A30}
.mw-body{margin:0 16px 16px;color:#33494C}
.mw-body mark{background:linear-gradient(transparent 55%,#91DFDA 55%) no-repeat;color:#002A30;padding:0 2px}
.chips-row{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.tag-logo{display:inline-flex;align-items:center;gap:8px}.tag-logo img{height:16px;width:auto}
.tag-file::before{content:"";display:inline-block;width:10px;height:12px;margin-inline-end:6px;border-radius:2px;background:var(--fc);vertical-align:-1px}
.gpa{text-align:end}.gpa p{margin:0}
.gpa-n{font-size:28px;line-height:1;color:var(--green)}
.gpa-h{margin-top:4px !important;padding:2px 8px;border-radius:999px;background:#1C1A16;color:#E8B84A;font-size:11.5px;white-space:nowrap}
.creds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:10px}
.creds li{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#FFFCF5;border:1.5px solid #E2D7C1;border-radius:14px}
.creds img{flex:none;height:34px;width:34px;object-fit:contain}
.creds img.wide{width:auto;height:30px;max-width:96px}
.creds .by{height:20px;width:auto;max-width:74px;margin-inline-start:auto}
.creds span{min-width:0}.creds b{display:block;font-weight:400;font-size:15px;line-height:1.25}.creds small{color:var(--muted);font-size:12.5px}
@supports (animation-timeline: view()){
.mk-row .lt-screen{animation:lid linear both;animation-timeline:--card;animation-range:entry 20% entry 90%}
.docs .doc{animation:fan linear both;animation-timeline:--card;animation-range:entry 40% cover 45%}
.browser{animation:bw-in linear both;animation-timeline:--card;animation-range:entry 40% cover 45%}
.mw-body mark{animation:mark linear both;animation-timeline:--card;animation-range:entry 70% cover 50%}
}
@keyframes lid{from{transform:rotateX(-80deg)}to{transform:none}}
@keyframes fan{from{transform:none}to{transform:translateX(var(--x)) rotate(var(--r))}}
@keyframes bw-in{from{translate:30% 0;rotate:4deg;opacity:0}to{translate:0 0;rotate:0deg;opacity:1}}
@keyframes mark{from{background-size:0 100%}to{background-size:100% 100%}}
@media (prefers-reduced-motion:reduce){.mk-row .lt-screen,.docs .doc,.browser,.mw-body mark{animation:none !important}}
/* the card slides up over its shrinking logo: a hand-off, never an empty screen */
.act + .stack,.act + .card{position:relative;z-index:1;margin-top:-58vh;margin-top:-58svh}
@supports not (animation-timeline: view()){.act + .stack,.act + .card{margin-top:0}}
.reduce .act + .stack,.reduce .act + .card{margin-top:0}
@media (prefers-reduced-motion:reduce){.act + .stack,.act + .card{margin-top:0}}
.foot .credits a{color:inherit}
/* the logo acts are pictures: they never take a click */
.act{pointer-events:none}
.creds b,.creds small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.creds li{padding:10px 12px}
/* ================= footer ================= */
.site-foot{position:relative;margin-top:28px;padding:28px 0 0;border-top:1px solid #34302A;overflow:hidden;color:#CFC5B1}
.sf-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);gap:28px}
@media (max-width:720px){.sf-top{grid-template-columns:1fr}}
.sf-mark,.sf-giant{margin:0;font-family:var(--font);letter-spacing:.005em;white-space:nowrap;line-height:1;direction:ltr}
.sf-mark{font-size:30px;color:#F5F0E6}
.sf-mark .i,.sf-giant .i{position:relative;display:inline-block;width:.234em;height:.64em}
.sf-mark .i::before,.sf-giant .i::before{content:"";position:absolute;left:.068em;bottom:0;width:.098em;height:.445em;background:currentColor}
.sf-mark .i b,.sf-giant .i b{position:absolute;left:.06em;bottom:.525em;width:.115em;height:.115em;background:var(--red)}
.sf-tag{margin:12px 0 0;max-width:40ch;font-size:15px;line-height:1.5}
.sf-live{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:13px;color:#A99E88}
.sf-live .dot{width:8px;height:8px;background:#7CD3A6}
.sf-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:420px){.sf-nav{grid-template-columns:1fr 1fr}}
.sf-nav div{display:flex;flex-direction:column;gap:8px;min-width:0}
.sf-h{margin:0 0 4px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
.sf-nav a{color:#F5F0E6;text-decoration:none;font-size:15px;width:fit-content;background:linear-gradient(var(--gold-2),var(--gold-2)) 0 100%/0 1.5px no-repeat;transition:background-size .25s}
.sf-nav a:hover,.sf-nav a:focus-visible{background-size:100% 1.5px}
.sf-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:28px;padding:16px 0 calc(8px + env(safe-area-inset-bottom,0px));border-top:1px solid #34302A;font-size:12.5px;color:#A99E88}
.sf-bottom a{color:inherit}
.sf-up{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;color:#F5F0E6 !important;text-decoration:none}
.sf-giant{font-size:clamp(70px,21vw,300px);margin:6px 0 -.18em;color:transparent;-webkit-text-stroke:1.5px #4A4438;user-select:none}
.sf-giant .i::before{background:#4A4438}
@supports (animation-timeline: view()){.sf-giant{animation:giant linear both;animation-timeline:view();animation-range:entry 0% entry 100%}}
@keyframes giant{from{translate:0 40%;opacity:0}to{translate:0 0;opacity:1}}
/* ===== Letters Challenge: the portal, recorded on two iPhone 16s ===== */
.lc{grid-column:1/-1;display:grid;gap:22px}
@media (min-width:860px){.lc{grid-template-columns:minmax(0,1fr) min(48%,480px);align-items:center;gap:32px;padding:24px 28px}}
.lc-copy{display:flex;flex-direction:column;gap:12px;min-width:0}
.lc-tile{background:radial-gradient(120% 100% at 50% 0%,#5A1C84,#250B3D);box-shadow:inset 0 0 0 1.5px rgba(255,210,36,.35)}
.lc-tile img{width:90%;height:auto}
.lc-portal{padding:12px 14px;border-radius:12px;background:#F6EFE2;border:1px solid #E6DCC8}
.lc-portal h4{margin:0 0 4px;font-size:16px}
.lc-portal p{margin:0}
.lc-portal .sub{margin-top:6px}
.phones{display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,4vw,26px)}
.iphone{container-type:inline-size;margin:0;width:min(46%,212px);display:flex;flex-direction:column;align-items:center;gap:12px}
.iphone figcaption{font-size:13px;line-height:1.35;color:var(--muted);text-align:center;max-width:24ch}
/* 71.6 x 147.6 mm body around a 393 x 852 pt screen: bezel, aluminium band, Dynamic Island, buttons */
.ip{position:relative;width:100%;padding:4.3cqw;border-radius:17.4cqw;background:#050506;box-shadow:inset 0 0 0 .75cqw #3A3C41,inset 0 0 0 1.05cqw #1A1B1E,inset 0 0 0 1.5cqw #0B0B0C,0 24px 44px -24px rgba(28,26,22,.62),0 6px 14px -8px rgba(28,26,22,.4);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.iphone:nth-child(2) .ip{margin-top:8%}
@media (hover:hover){.iphone:hover .ip{transform:translateY(-6px) rotate(-1deg)}}
.ip-k{position:absolute;width:1cqw;border-radius:1cqw;background:linear-gradient(90deg,#2A2B2F,#55575C 60%,#2A2B2F)}
.ip-act,.ip-vu,.ip-vd{left:-.7cqw}.ip-side,.ip-cam{right:-.7cqw}
.ip-act{top:18%;height:5.4%}.ip-vu{top:27%;height:9%}.ip-vd{top:38%;height:9%}.ip-side{top:29%;height:13.5%}.ip-cam{top:62%;height:7.5%;background:linear-gradient(90deg,#2A2B2F,#6E7076 60%,#2A2B2F)}
.ip-scr{position:relative;overflow:hidden;border-radius:12.8cqw;background:#190521;aspect-ratio:393/852;transform:translateZ(0)}
.ip-scr video{display:block;width:100%;height:100%;object-fit:cover}
.ip-bar{position:absolute;inset:0 0 auto;height:13.7cqw;display:grid;grid-template-columns:1fr 29.4cqw 1fr;align-items:center;color:#fff;pointer-events:none}
.ip-bar b{justify-self:center;padding-left:2.4cqw;font:600 3.95cqw/1 -apple-system,"SF Pro Text",system-ui,sans-serif;letter-spacing:-.01em}
.ip-bar span{grid-column:3;justify-self:center;display:flex;align-items:center;gap:1.2cqw;padding-right:1.6cqw}
.ip-bar svg{display:block;height:2.8cqw;width:auto;fill:currentColor}
.ip-isl{position:absolute;top:2.6cqw;left:50%;width:29.4cqw;height:8.7cqw;margin-left:-14.7cqw;border-radius:99px;background:#000}
.ip-home{position:absolute;bottom:1.9cqw;left:50%;width:31.2cqw;height:1.2cqw;margin-left:-15.6cqw;border-radius:99px;background:rgba(255,255,255,.86)}
/* ===== round 14 ===== */
/* nothing may widen the page on a phone (mockups slide in from the side). On the root as well: a clip on the body alone
   passes up to the viewport, and iOS still lets a page with even 2px of overflow be dragged sideways */
html,body{overflow-x:clip}
.aa-row{overflow-x:clip;overflow-clip-margin:24px}
/* the wordmark, anywhere: the first i's dot is the red one, the last i's is plain */
.wm{margin:0;font-family:"Helmet","Segoe UI",system-ui,sans-serif;font-weight:400;letter-spacing:.005em;white-space:nowrap;line-height:1;direction:ltr;unicode-bidi:isolate}
.wm .i{position:relative;display:inline-block;width:.234em;height:.64em}
.wm .i::before{content:"";position:absolute;left:.068em;bottom:0;width:.098em;height:.445em;background:currentColor}
.wm .i b{position:absolute;left:.06em;bottom:.525em;width:.115em;height:.115em;background:var(--red)}
.wm .i b.ink,.mark .i b.ink,.sf-mark .i b.ink{background:currentColor}
.sf-giant .i b.ink{background:#4A4438}
.hero .head .mark .i b.ink{box-shadow:0 0 16px rgba(255,252,245,.7)}
/* header */
.topbar::after{content:"";position:absolute;left:30px;right:30px;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold-2),var(--red));transform-origin:0 50%;scale:0 1;pointer-events:none}
[dir="rtl"] .topbar::after{transform-origin:100% 50%;background:linear-gradient(-90deg,var(--gold-2),var(--red))}
.tb-left{display:flex;align-items:center;min-width:0}
.tb-brand{display:block;max-width:0;opacity:0;overflow:hidden;margin-inline-end:0;font-size:22px;color:var(--ink);text-decoration:none;padding-block:4px}
.topbar .status{gap:9px;font-size:14px;font-weight:500;color:#2E2A23;overflow:hidden}
/* "Open to work": a pixel work bag instead of the dot; now and then it hops */
.topbar .status .dot{width:16px;height:16px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><path fill='%235E3420' d='M5 2h6v1H5zM5 3h1v2H5zM10 3h1v2h-1z'/><path fill='%238A4A2E' d='M2 5h12v1h1v7h-1v1H2v-1H1V6h1z'/><path fill='%23A9623B' d='M2 6h12v2H2z'/><path fill='%235E3420' d='M1 9h14v1H1z'/><path fill='%23E8B84A' d='M7 8h2v3H7z'/></svg>") center/16px 16px no-repeat;animation:bag-hop 4.5s ease-in-out 1.5s infinite}
.night .topbar .status .dot{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><path fill='%23A8663F' d='M5 2h6v1H5zM5 3h1v2H5zM10 3h1v2h-1z'/><path fill='%23E3A077' d='M2 5h12v1h1v7h-1v1H2v-1H1V6h1z'/><path fill='%23F2C29B' d='M2 6h12v2H2z'/><path fill='%23A8663F' d='M1 9h14v1H1z'/><path fill='%23FFE08A' d='M7 8h2v3H7z'/></svg>")}
@keyframes bag-hop{0%,84%,100%{translate:0 0}88%{translate:0 -3px}92%{translate:0 0}95%{translate:0 -1px}98%{translate:0 0}}
.tb-live{display:none;align-items:center;gap:8px;margin:0 auto 0 4px;padding-inline-start:14px;border-inline-start:1px solid #E2D7C1;font-size:13.5px;color:#5E5648;white-space:nowrap}
.tb-live b{font-weight:500;color:var(--ink)}
.tb-clock{color:var(--green)}
.tb-wx{display:inline-flex;align-items:center;gap:6px;padding-inline-start:8px;border-inline-start:1px solid #E2D7C1}
.tb-wx[hidden]{display:none}
.wi-box{display:grid;width:16px;height:16px}.wi-box .wi{grid-area:1/1;display:none}
.tb-wx[data-k=sun] .wi-sun,.tb-wx[data-k=moon] .wi-moon,.tb-wx[data-k=cloud] .wi-cloud,.tb-wx[data-k=rain] .wi-rain,.tb-wx[data-k=storm] .wi-storm,.tb-wx[data-k=dust] .wi-dust{display:block}
@media (min-width:900px){.tb-live{display:flex}}
.topbar .actions{margin-inline-start:auto;gap:6px}
@media (max-width:480px){.topbar{padding-inline:14px 5px;gap:6px}.topbar .actions{gap:4px}.topbar .iconbtn{width:40px;height:40px}.topbar .pill{min-height:40px;padding:0 14px}}
@supports (animation-timeline: scroll()){
  .topbar::after{animation:tb-prog linear both;animation-timeline:scroll(root)}
  .tb-brand{animation:tb-brand linear both;animation-timeline:scroll(root);animation-range:45vh 75vh}
  .topbar{animation:tb-lift linear both;animation-timeline:scroll(root);animation-range:0 160px}
}
@media (max-width:560px){@supports (animation-timeline: scroll()){.topbar .status{animation:tb-status linear both;animation-timeline:scroll(root);animation-range:45vh 75vh}}}
@keyframes tb-prog{to{scale:1 1}}
@keyframes tb-brand{to{max-width:120px;opacity:1;margin-inline-end:16px}}
@keyframes tb-status{to{max-width:0;opacity:0}}
@keyframes tb-lift{to{box-shadow:0 1px 2px rgba(28,26,22,.08),0 16px 34px -14px rgba(28,26,22,.45)}}
/* the official warning: a slim news ticker under the bar: a label in its colour, the warning running along the strip, hideable */
.wx-alert{position:fixed;z-index:19;top:calc(72px + env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:#FFF7E0;border:1px solid #F0C56A;box-shadow:0 8px 22px -14px rgba(90,58,0,.5);color:#4A3200;font-size:13px;line-height:1.3}
.wx-alert[hidden]{display:none}
.wa-link{flex:1;min-width:0;display:flex;align-items:center;color:inherit;text-decoration:none}
.wa-badge{--wa-bg:#C8102E;flex:none;display:inline-flex;align-items:center;gap:5px;padding:5px 11px 5px 8px;border-radius:999px;background:var(--wa-bg);color:#fff;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.wa-badge[data-level=orange]{--wa-bg:#D9600B}
.wa-badge[data-level=yellow]{--wa-bg:#E9B500;color:#2E2400}
.wa-badge svg{width:12px;height:12px}
.wa-text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.wa-reel{display:inline-flex;width:max-content;animation:wa-roll var(--wa-dur,18s) linear infinite}
.wa-item{display:inline-flex;align-items:center;gap:7px;flex:none}
.wa-item b{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#9A7426}
/* between repeats: the site's gold square */
.wa-item::after{content:"";flex:none;width:6px;height:6px;margin-inline:18px;background:var(--gold)}
.wx-alert:hover .wa-reel,.wa-link:focus-visible .wa-reel{animation-play-state:paused}
@keyframes wa-roll{to{transform:translateX(-50%)}}
[dir="rtl"] .wa-reel{animation-name:wa-roll-r}
@keyframes wa-roll-r{to{transform:translateX(50%)}}
.wa-src{display:none}
.wa-x{flex:none;width:30px;height:30px;padding:0;border:0;border-radius:999px;background:transparent;color:#6B4E12;display:grid;place-items:center;cursor:pointer}
.wa-x:hover{background:rgba(201,151,58,.18)}
/* standing still (the pause button, or reduced motion): one copy, wrapped, nothing moves */
.still .wa-text{white-space:normal;-webkit-mask-image:none;mask-image:none}
.still .wa-item[aria-hidden],.still .wa-item::after{display:none}
.still .wa-item{display:inline}
.still .wa-item b{margin-inline-start:6px}
.still .wa-reel{display:block;width:auto;padding-inline:10px 4px}
@media (prefers-reduced-motion:reduce){.wa-reel{animation:none;display:block;width:auto;padding-inline:10px 4px}.wa-text{white-space:normal;-webkit-mask-image:none;mask-image:none}.wa-item[aria-hidden],.wa-item::after{display:none}.wa-item{display:inline}.wa-item b{margin-inline-start:6px}}
@supports (animation-timeline: scroll()){.wx-alert{animation:wa-away linear both;animation-timeline:scroll(root);animation-range:0 260px}}
@keyframes wa-away{to{opacity:0;translate:0 -10px;visibility:hidden}}
/* the crescent stays in front of the warning strip: a copy of the tower's top rides just above the strip while it shows (app.js keeps it on the real one) */
.tw-top{position:fixed;z-index:19;left:0;top:0;pointer-events:none;overflow:visible}
/* branded loader: real progress (fonts, what is on screen, the page), first visit in a session only */
.boot{display:none}
.booting .boot{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg);animation:boot-safe .3s 7s forwards}
.boot-in{display:flex;flex-direction:column;align-items:center;gap:20px;transition:translate .5s cubic-bezier(.7,0,.3,1),opacity .4s}
.boot-mark{font-size:clamp(46px,13vw,92px);color:var(--ink)}
.boot-mark .i b:not(.ink){animation:m-hop 1.5s ease-in-out infinite}
.boot-bar{width:min(260px,62vw);height:3px;border-radius:3px;background:#E3D9C6;overflow:hidden}
.boot-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-2),var(--red));transform-origin:0 50%;scale:var(--bp,.06) 1;transition:scale .3s ease-out}
[dir="rtl"] .boot-bar i{transform-origin:100% 50%}
.boot-t{display:flex;gap:12px;margin:0;font-size:13px;color:var(--muted)}
.boot-t b{min-width:3.2ch;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;text-align:end}
.boot-done .boot{clip-path:inset(0 0 100% 0);transition:clip-path .75s cubic-bezier(.75,0,.2,1) .12s}
.boot-done .boot-in{translate:0 -24px;opacity:0}
@keyframes boot-safe{to{visibility:hidden;opacity:0}}
/* logo acts: a hint while the stage is still empty */
.act-hint{position:absolute;left:50%;top:calc(max(96px,16svh) + env(safe-area-inset-top,0px));translate:-50% 0;margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;letter-spacing:.02em;color:#5E5648;opacity:0;animation:act-hint linear both;animation-timeline:--act;animation-range:entry 15% contain 14%}
@keyframes act-hint{0%{opacity:0}25%,72%{opacity:1}100%{opacity:0}}
.ah-ico{display:grid;place-items:center;height:34px}
.ah-hand{animation:ah-swipe 1.7s cubic-bezier(.45,0,.25,1) infinite}
.ah-mouse{display:none}.ah-wheel{animation:ah-wheel 1.5s ease-in-out infinite}
@media (pointer:fine){.ah-hand{display:none}.ah-mouse{display:block}}
@keyframes ah-swipe{0%{translate:0 9px;opacity:0}18%{opacity:1}72%{translate:0 -9px;opacity:1}100%{translate:0 -12px;opacity:0}}
@keyframes ah-wheel{0%{translate:0 0;opacity:1}70%{translate:0 7px;opacity:0}100%{translate:0 0;opacity:0}}
/* contact skyline: Makkah time on the clock, day or night from today's sunrise and sunset, the live weather */
.skyline{display:block;width:100%;height:clamp(130px,19vw,200px);margin-top:10px;view-timeline:--sky block;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.sk-g1{stop-color:#E8B84A;stop-opacity:0}.sk-g2{stop-color:#E8B84A;stop-opacity:.16}
.skyline.is-dusk .sk-g2{stop-color:#FF8A4C;stop-opacity:.24}
.skyline.is-night .sk-g2{stop-color:#4F63B0;stop-opacity:.26}
.sk-star{fill:#F5F0E6;opacity:0}
.is-night .sk-star{animation:sk-tw 3.4s ease-in-out infinite}
.sk-halo{fill:#F2B33D;opacity:.16}.sk-sun{fill:#F2B33D}.sk-moon{fill:#EDE3C8;display:none}
.is-night .sk-halo{fill:#EDE3C8;opacity:.1}.is-night .sk-sun{display:none}.is-night .sk-moon{display:block}
.sk-cl{fill:#3A362F;display:none}
.wx-cloudy .sk-cl,.wx-rain .sk-cl,.wx-storm .sk-cl,.wx-dust .sk-cl{display:block;animation:sk-drift 70s linear infinite alternate}
.sk-cl.c2{animation-duration:90s}.sk-cl.c3{animation-duration:60s}
.wx-dust .sk-cl{fill:#5A4A33;opacity:.5}
.sk-rain{display:none;stroke:#7FA7D6;stroke-width:1.2;stroke-linecap:round;opacity:.6}
.wx-rain .sk-rain,.wx-storm .sk-rain{display:block;animation:sk-rain .7s linear infinite}
.sk-w{fill:#4A443A;opacity:.6}
.is-night .sk-w,.is-dusk .sk-w{fill:#F5D88A;opacity:1;animation:sk-win 7s ease-in-out infinite}
.sk-ring{stroke:#3CFF8A;opacity:0}
.is-night .sk-ring{opacity:.85;animation:sk-glow 3s ease-in-out infinite alternate}
.sk-beam{fill:#E9FFF0;opacity:0}
.is-night .sk-beam{opacity:.12;animation:sk-beam 5s ease-in-out infinite alternate}
.sk-cres{fill:#E8B84A}
.sk-b{transform-box:fill-box;transform-origin:50% 100%}
@supports (animation-timeline: view()){.sk-b{animation:sk-rise linear both;animation-timeline:--sky;animation-range:entry calc(var(--k) * 9%) entry calc(45% + var(--k) * 12%)}}
@keyframes sk-rise{from{scale:1 0}}
@keyframes sk-tw{0%,100%{opacity:.15}50%{opacity:.9}}
@keyframes sk-win{0%,100%{opacity:1}40%{opacity:.35}60%{opacity:.9}}
@keyframes sk-glow{from{opacity:.45}to{opacity:.95}}
@keyframes sk-beam{from{opacity:.06}to{opacity:.2}}
@keyframes sk-drift{from{translate:-60px 0}to{translate:60px 0}}
@keyframes sk-rain{from{translate:0 -8px}to{translate:-3px 8px}}
@media (prefers-reduced-motion:reduce){.sk-b,.sk-cl,.sk-rain,.is-night .sk-star,.is-night .sk-w{animation:none !important}}
.cta-note{margin:10px 0 0;font-size:14px;color:var(--muted);text-align:center}
/* the rolling words glow without a clipped box: the glow goes on the window, after clipping */
.hero .head .roll .reel{text-shadow:none}
.hero .head .roll .win{filter:drop-shadow(0 0 7px rgba(255,252,245,.85))}
.ah-hand{width:30px;height:40px}.ah-ico{height:44px}
@media (max-width:420px){.sf-nav div:first-child{grid-column:1/-1}}
/* ===== round 15 ===== */
/* swipe hint: on phones a finger touches and slides up; the mouse only on wide screens with a mouse */
.ah-hand{width:44px;height:48px;overflow:visible}
.ah-ico{height:52px}
.ah-fing{animation:ah-slide 2.2s cubic-bezier(.45,0,.2,1) infinite}
.ah-tap{transform-box:fill-box;transform-origin:50% 50%;animation:ah-tap 2.2s ease-out infinite}
@keyframes ah-slide{0%{translate:0 10px;opacity:0}12%{translate:0 10px;opacity:1}30%{translate:0 10px}78%{translate:0 -12px;opacity:1}100%{translate:0 -14px;opacity:0}}
@keyframes ah-tap{0%,12%{scale:.3;opacity:0}22%{scale:.55;opacity:1}40%{scale:1.15;opacity:0}100%{opacity:0}}
.ah-touch{display:inline}.ah-wide{display:none}
.ah-hand{display:block}.ah-mouse{display:none}
@media (pointer:fine) and (min-width:821px){.ah-hand{display:none}.ah-mouse{display:block}.ah-touch{display:none}.ah-wide{display:inline}}
/* footer skyline: the hero's tower at small scale, with the six Abraj towers */
.skyline{height:clamp(230px,36vw,400px)}
.sk-dome{fill:#2F4D45}
.sk-glow,.sk-lit{opacity:0;transition:opacity .6s}
.is-night .sk-glow{opacity:1;animation:sk-glow 3s ease-in-out infinite alternate}
.is-night .sk-lit,.is-dusk .sk-lit{opacity:.85}
.sk-beam path{fill:#E9FFF0}
.sk-ring{stroke:#3CFF8A;opacity:0}
.is-night .sk-ring{opacity:.7;animation:sk-glow 3s ease-in-out infinite alternate}
.skyline .sk-b{filter:brightness(.78) saturate(.9)}
.skyline.is-night .sk-b{filter:brightness(.55) saturate(.8)}
.skyline.is-night .sk-tower{filter:brightness(.75)}
/* ===== round 17 ===== */
.ah-ico{height:64px}
.sw{overflow:visible}
.sw-hand{animation:sw-hand 2.4s cubic-bezier(.45,0,.25,1) infinite}
.sw-trail{stroke-dasharray:60;stroke-dashoffset:60;animation:sw-trail 2.4s cubic-bezier(.45,0,.25,1) infinite}
.sw-head{opacity:0;animation:sw-head 2.4s cubic-bezier(.45,0,.25,1) infinite}
@keyframes sw-hand{0%{translate:0 0;opacity:0}10%{opacity:1}22%{translate:0 0}76%{translate:0 -26px;opacity:1}100%{translate:0 -28px;opacity:0}}
@keyframes sw-trail{0%,22%{stroke-dashoffset:60;opacity:1}76%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes sw-head{0%,62%{opacity:0;translate:0 6px}76%{opacity:1;translate:0 0}100%{opacity:0}}
.cue .sw{display:block}.cue-mouse{display:none}
@media (pointer:fine) and (min-width:821px){.cue .sw{display:none}.cue-mouse{display:block}}
/* hero on phones: the wordmark and words at the top, the swipe hint at the bottom, and the tower scaled (by JS) so nothing sits on it */
.hero .head{translate:0 var(--push,0px)}
@media (max-width:640px){
  .hero .head{bottom:calc(14px + env(safe-area-inset-bottom,0px));translate:none}
  .hero .head > :not(.scrollrow){translate:0 var(--push,0px)}
  .hero .head .scrollrow{margin-top:auto;align-self:stretch}
  .who .wl{display:none}
}
/* ===== round 18 ===== */
/* Arabic: 7sn Yad only for big display type; everything you read is IBM Plex Sans Arabic */
[dir="rtl"] h1:not(.mark),[dir="rtl"] h2,[dir="rtl"] .roll,[dir="rtl"] .cap,[dir="rtl"] .boot-t span{font-family:var(--ar)}
[dir="rtl"] .card h3,[dir="rtl"] .sf-h,[dir="rtl"] .pill,[dir="rtl"] .btn{font-weight:600}
/* footer: the Abraj Al-Bait seen from the Haram, its sky following Makkah's real time and weather */
.skyline{height:clamp(300px,48vw,520px);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%),linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 24%),linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
.skyline{--s1:#35506E;--s2:#8DB0C8;--s3:#EADAB8;--city:#6E6253}
.skyline.is-dusk{--s1:#2A2F55;--s2:#A9607A;--s3:#F2A46A;--city:#4A3A3A}
.skyline.is-night{--s1:#0B1124;--s2:#18264C;--s3:#344574;--city:#1E2236}
.sk-s1{stop-color:var(--s1)}.sk-s2{stop-color:var(--s2)}.sk-s3{stop-color:var(--s3)}
.sk-city{fill:var(--city)}.sk-floor{fill:#2A2620}
.sk-beams{opacity:0}.sk-beams path{fill:#E9F4FF}
.is-night .sk-beams{opacity:.16}
.sk-sweep{transform-origin:195px 300px;animation:sk-sweep 14s ease-in-out infinite alternate}
@keyframes sk-sweep{from{rotate:-7deg}to{rotate:7deg}}
.sk-ring2{fill:#D8CFBD}
.is-night .sk-ring2,.is-dusk .sk-ring2{fill:#6CFFA2}
.is-night .sk-min{filter:brightness(.8)}
.skyline .sk-b{filter:none}
.skyline.is-dusk .sk-b{filter:brightness(.82) sepia(.15)}
.skyline.is-night .sk-b{filter:brightness(.5) saturate(.8)}
.skyline.is-night .sk-tower{filter:brightness(.72)}
.is-night .sk-lit,.is-dusk .sk-lit{opacity:.9}
.sk-glow{opacity:0}
.is-night .sk-glow{opacity:1;animation:sk-glow 3.4s ease-in-out infinite alternate}
.sk-birds{fill:none;stroke:#3A3630;stroke-width:3;stroke-linecap:round}
.sk-birdfly{animation:sk-birds 38s linear infinite}
.is-night .sk-birdfly{display:none}
@keyframes sk-birds{from{translate:900px 560px}to{translate:-900px 420px}}
.sk-cl{fill:#5C5F66}
.is-night .sk-cl{fill:#2A2F44}
.wx-dust .sk-cl{fill:#8A7350}
.sk-rain{stroke:#A9C6E8;stroke-width:3}
@media (prefers-reduced-motion:reduce){.sk-sweep,.sk-birdfly{animation:none}}
@media (max-width:640px){.hero .head .cue-t{font-size:12.5px;line-height:1.35}.hero .head .scrollrow{padding:7px 12px 7px 8px}}
/* ===== round 20 ===== */
/* phones: the tower's fit (set by the guard) holds while the words are up, then eases back before the zoom into the dial */
@keyframes v-fit{0%,26%{scale:var(--cs,1);translate:0 var(--ct,0px)}42%,100%{scale:1;translate:0 0}}
.hero .v-cam{animation-name:v-cam,v-fit}
.reduce .hero .v-cam{scale:var(--cs,1);translate:0 var(--ct,0px)}
@media (prefers-reduced-motion:reduce){.hero .v-cam{scale:var(--cs,1);translate:0 var(--ct,0px)}}
/* ===== round 21: the footer scene is the Haram, full width ===== */
.skyline.hr{display:block;width:100%;height:clamp(260px,36vw,560px);margin:18px 0 0;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%);-webkit-mask-composite:source-over;mask-composite:add}
.hr{--s1:#3F6B92;--s2:#9CC2DA;--s3:#F0E3C6;--stone:#EFE7D6;--stone2:#E3D7BF;--win:#B5A486;--floor:#F4F0E8}
.hr.is-dusk{--s1:#2B2F58;--s2:#B4637A;--s3:#F3A86C;--stone:#E2CBB0;--stone2:#D3B898;--win:#8E6E58;--floor:#EAD9C6}
.hr.is-night{--s1:#0A1022;--s2:#16234A;--s3:#2E3E6C;--stone:#B9B3A6;--stone2:#A39C8E;--win:#F2CF83;--floor:#E9E6DE}
.hr-far{opacity:.92}
.hr.is-night .hr-far{filter:brightness(.62)}
.hr-exp{fill:var(--stone2)}.hr-win{fill:var(--win)}.hr-corn{fill:#C9A15A}
.hr-port{fill:var(--stone)}.hr-arch{fill:#5E5446}.hr-dome{fill:#C9C0AE}
.hr.is-night .hr-arch{fill:#F3D48A}.hr.is-night .hr-port{fill:#CFC7B6}
.hr-mb{fill:var(--stone)}.hr-cap{fill:#D9CDB4}.hr-gal{fill:var(--stone2)}.hr-gold{fill:#D9A441}
.hr-ring{fill:#CDBF9F}.hr.is-night .hr-ring,.hr.is-dusk .hr-ring{fill:#5CFF9C}
.hr-floor{fill:var(--floor)}.hr-floor2{fill:#FFFFFF;opacity:.35}
.hr-tw{transform-box:fill-box;transform-origin:center;animation:tawaf 90s linear infinite}
.hr-p1{stroke:#FFFFFF}.hr-p2{stroke:#CFC8BA}
.hr.is-night .hr-p2{stroke:#E8E2D4}
@keyframes tawaf{to{rotate:-360deg}}
.hr-kf{fill:#141414}.hr-ks{fill:#0B0B0B}.hr-roof{fill:#2A2A2A}
.hr-band{fill:#C9973A}.hr-band2{fill:#A87B2C}
.hr-txt{stroke:#5A3C10;stroke-width:1.2;stroke-linecap:round}
.hr-door{fill:#D9A441}.hr-stone{fill:#B8BCC2}
.hr-hijr{stroke:#F7F3EA}
.hr-maqam rect{fill:#C9973A}.hr-maqam path{fill:#E8C25E;opacity:.9}
.hr-glow{opacity:0;mix-blend-mode:screen}
.hr.is-night .hr-glow{opacity:.55}
.hr.is-night .hr-band{filter:brightness(1.25)}
.hr .sk-birds{stroke:#3A3630;stroke-width:2.4}
@media (prefers-reduced-motion:reduce){.hr-tw{animation:none}}
/* rain in the footer scene: no falling streaks; the sky goes overcast and the mataf turns wet, reflecting the Kaaba */
.hr-reflect{opacity:0;filter:blur(1.5px)}
.wx-rain .hr-reflect,.wx-storm .hr-reflect{opacity:.2}
.wx-rain .hr,.wx-storm .hr{--s1:#4B5563;--s2:#8C97A3;--s3:#CDD1D4;--floor:#E3E3E0}
.wx-rain .hr.is-night,.wx-storm .hr.is-night{--s1:#0C111C;--s2:#1D2636;--s3:#323D52}
.wx-cloudy .hr{--s1:#566B80;--s2:#A3B4C2;--s3:#E2DED2}
.wx-rain .hr .sk-sun,.wx-rain .hr .sk-halo,.wx-storm .hr .sk-sun,.wx-storm .hr .sk-halo{opacity:.35}
.wx-rain .hr-floor2,.wx-storm .hr-floor2{opacity:.6}
/* ===== round 24 ===== */
/* switching language: an ink wipe in the new reading direction, the language's name in gold */
.lang-wipe{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--ink);pointer-events:none;animation:lw-in .46s cubic-bezier(.7,0,.25,1) both}
.lang-wipe.to-rtl{--from:inset(0 0 0 100%)}.lang-wipe.to-ltr{--from:inset(0 100% 0 0)}
@keyframes lw-in{from{clip-path:var(--from)}to{clip-path:inset(0)}}
.lang-wipe span,html.wiping::after{color:var(--gold-2);font:400 clamp(52px,12vw,128px)/1 "Helmet","Segoe UI",sans-serif}
.lang-wipe span[lang="ar"],html.wipe-rtl::after{font-family:"7sn Yad","Helmet",sans-serif}
.lang-wipe span{animation:lw-word .46s cubic-bezier(.2,.7,.2,1) .06s both}
.lang-wipe.to-rtl span{--tx:48px}.lang-wipe.to-ltr span{--tx:-48px}
@keyframes lw-word{from{opacity:0;translate:var(--tx) 0}to{opacity:1;translate:0 0}}
html.wiping::before{content:"";position:fixed;inset:0;z-index:300;background:var(--ink);pointer-events:none}
html.wiping::after{content:attr(data-wipe);position:fixed;inset:0;z-index:301;display:grid;place-items:center;pointer-events:none}
html.wiping:not(.wipe-out)::before,html.wiping:not(.wipe-out)::after{animation:lw-safe 0s 3s forwards}
html.wipe-out.wipe-rtl::before,html.wipe-out.wipe-rtl::after{animation:lw-out-rtl .62s cubic-bezier(.7,0,.25,1) forwards}
html.wipe-out.wipe-ltr::before,html.wipe-out.wipe-ltr::after{animation:lw-out-ltr .62s cubic-bezier(.7,0,.25,1) forwards}
@keyframes lw-out-rtl{to{clip-path:inset(0 100% 0 0)}}
@keyframes lw-out-ltr{to{clip-path:inset(0 0 0 100%)}}
@keyframes lw-safe{to{visibility:hidden}}
/* «under the hood», easy to reach: a footer button, and on touch screens a bigger corner */
.sf-hood{margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;padding:0;background:none;border:0;color:#F5F0E6;font:inherit;cursor:pointer}
.sf-hood:hover{text-decoration:underline;text-underline-offset:3px}
.sf-hood + .sf-up{margin-inline-start:18px}
@media (pointer:coarse){.peel-btn{width:96px;height:96px}}
[dir="rtl"] .home-link svg{scale:-1 1}
/* ===== round 25: on wide screens the page is a sheet in front of the clock tower, and scrolling takes the camera
   down its Haram face, from under the clock to the gate between the two hotels (drawn in /descent.html, loaded by app.js) ===== */
.dsc,.dsc-end{display:none}
@media (min-width:1240px){
html.dsc-on .dsc{display:block;position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict;--s:calc((405px + 100vw / 8) / 47.5)}
html.dsc-on .dsc-far{position:absolute;inset:0;width:100%;height:100%}
html.dsc-on .dsc-scene{position:absolute;left:50%;top:0;max-width:none;width:calc(var(--s) * 200);height:calc(var(--s) * 400);margin-left:calc(var(--s) * -100);transform-origin:50% 100%;will-change:translate,scale}
html.dsc-on .dsc-end{display:flex;align-items:flex-end;justify-content:center;height:100vh;padding-bottom:30px}
/* once the sheet has gone, a pill on the plaza names the gate and says the page goes on; it rides the bottom of the
   screen from the moment the sheet ends, not only at the very end */
html.dsc-on .dsc-more{position:sticky;bottom:30px;display:inline-flex;align-items:center;gap:10px;height:50px;padding-inline:22px 18px;border-radius:999px;background:rgba(255,252,245,.97);border:1px solid rgba(205,191,159,.5);box-shadow:0 1px 2px rgba(28,26,22,.05),0 14px 30px -14px rgba(28,26,22,.5);color:var(--ink);font:500 16px var(--font);text-decoration:none}
html.dsc-on .dsc-more svg{flex:none}
html.dsc-on .dsc-more .dm-go{color:var(--red);animation:dsc-bob 1.6s ease-in-out infinite}
html.dsc-on .dsc-more .dm-pin{color:var(--bronze)}
html.dsc-on .dsc-more .dm-name{font-weight:600}
html.dsc-on .dsc-more .dm-name[lang="ar"]{font:400 21px/1 var(--ar);margin-top:2px}
html.dsc-on .dsc-more .dm-sep{width:1px;height:22px;background:var(--line);margin-inline:4px}
html.dsc-on.night .dsc-more{background:rgba(22,31,54,.94);border-color:rgba(255,255,255,.09);box-shadow:0 1px 2px rgba(0,0,0,.25),0 14px 30px -14px rgba(0,0,0,.8)}
html.dsc-on .body{background:var(--bg);border-radius:28px;box-shadow:0 0 0 1px rgba(28,26,22,.07),0 30px 80px -24px rgba(28,26,22,.5)}
html.dsc-on.night .body{box-shadow:0 0 0 1px rgba(255,255,255,.07),0 30px 80px -24px rgba(0,0,0,.8)}
}
@keyframes dsc-bob{0%,100%{translate:0 -2px}50%{translate:0 3px}}
@keyframes dsc-zoom{from{scale:1}to{scale:var(--fit,1)}}
@keyframes dsc-move{from{translate:0 0}to{translate:0 calc(100vh - var(--s) * 400)}}
@supports (animation-timeline: view()){
html.stl{timeline-scope:--dsc}
html.stl.dsc-on .body{view-timeline:--dsc block}
html.stl.dsc-on .dsc-scene{animation:dsc-move linear both,dsc-zoom linear both;animation-timeline:--dsc,--dsc;animation-range:contain 0% exit 100%,exit 0% exit 100%}
}
/* ===== night: from Makkah sunset to sunrise (a script in each page's head sets html.night) ===== */
html.night{
  --bg:#10182B; --card:#18223A; --ink:#F2ECDF; --muted:#A3ABBF; --line:#2A3552; --chip:#222C47;
  --gold:#D9AA4D; --bronze:#E3A077; --green:#62C99D; --red:#FF5A62;
  color-scheme:dark;
}
/* the hero has its own sky: its pills and the about window keep their paper; only the name and the rolling words take night ink */
.night .hero{--bg:#F5F0E6; --card:#FFFFFF; --ink:#1C1A16; --muted:#5E5648; --line:#E3D9C6; --chip:#EFE5D2; --gold:#C9973A; --bronze:#8A4A2E; --green:#1F6B52; color:var(--ink)}
.night .hero .head .mark,.night .hero .roll{color:#FFF8EA;text-shadow:0 2px 12px rgba(6,10,24,.5)}
.night .hero .roll{--green:#7DD8AC;--bronze:#F2BE8C}
.night .hero .head .mark .i::before,.night .hero .head .mark .i b.ink{box-shadow:none}
.night .hero .head .roll .win{filter:none}
.night .topbar{background:rgba(22,31,54,.94);border-color:rgba(255,255,255,.09);box-shadow:0 1px 2px rgba(0,0,0,.25),0 10px 24px -14px rgba(0,0,0,.7)}
.night .topbar .status{color:#D8D1C2}
.night .iconbtn,.night .chip{border-color:#48526E}
.night .card,.night .fact{border-color:var(--line)}
.night a.card:hover{box-shadow:0 10px 24px rgba(0,0,0,.35)}
.night .contact{background:#0A1020;color:var(--ink)}
.night .btn.gold{color:#1C1A16}
.night .btn.ghost{color:var(--ink);border-color:#4A5470}
/* the dial the hero zooms through opens onto the night page */
.night .v-dial{animation-name:v-dial-n}
@keyframes v-dial-n{0%,69.47%{fill:#FBFAF5}80%{fill:#3A4A7A}88%,100%{fill:#10182B}}
/* logo acts: light marks on the dark stage; AutoAcad's dark logo sits on a paper tile, like its app icon */
.night .act-hint{color:var(--muted)}
.night .fcb .o{filter:brightness(0) invert(1)}
.night .fc-word{background:#E8EDF4}
.night .uqub .u,.night .uqub .p{stroke:#2FA4A6}
.night .uqu-name{color:#45B9B9}
.night .uqu-name small{color:var(--muted)}
.night .bsfb .hex{fill:#E3EEEC;stroke:#E3EEEC}
.night .bsfb .lt{fill:#E3EEEC}
.night .aa-l{background:#F4EFE4;border-radius:22%;padding:9%;filter:drop-shadow(0 12px 24px rgba(0,0,0,.35))}
/* certificates: dark cards, each issuer's logo on its own paper tile */
.night .creds li{background:var(--card);border-color:var(--line)}
.night .creds img{background:#F4EFE4;border-radius:8px;padding:4px}
.night .creds .by,.night .creds img.wide{box-sizing:content-box;padding:3px 6px;border-radius:6px}
.night .words span{animation-name:wlit-n}
@keyframes wlit-n{from{color:#4C5470}to{color:#F2ECDF}}
.night .sf-giant{-webkit-text-stroke-color:#34405E}
.night .sf-giant .i::before,.night .sf-giant .i b.ink{background:#34405E}
/* the pointing hands are black ink on white, multiplied away by day; at night the ink turns light and the paper drops out */
.night .honors-cta .point{filter:invert(1);mix-blend-mode:screen;opacity:.85}
.night .lc-portal{background:#1D2741;border-color:var(--line)}
.night .tb-live{color:var(--muted)}
.night .boot-bar{background:var(--line)}
/* real app mockups stay daylight screens */
.night :is(.aa-check,.browser,.mail-win,.doc,.logo-tile,.bsf-tile,.lt-screen){--bg:#F5F0E6;--card:#FFFFFF;--ink:#1C1A16;--muted:#5E5648;--line:#E3D9C6;--chip:#EFE5D2;--gold:#C9973A;--bronze:#8A4A2E;--green:#1F6B52;color:var(--ink)}
/* the language wipe is a night-sky curtain, not a cream flash */
.night .lang-wipe,html.night.wiping::before{background:#0A1020}
/* the peeled corner: the back of a night page is dark paper */
.night .flap{background-image:linear-gradient(to top left,#3B4669 50%,#2B3554 68%,#1A2239 100%)}
html.night[dir="rtl"] .flap{background-image:linear-gradient(to top right,#3B4669 50%,#2B3554 68%,#1A2239 100%)}
.night .turn-back{background:linear-gradient(to top left,transparent 50%,#3B4669 50%,#2B3554 74%,#1A2239 100%)}
html.night[dir="rtl"] .turn-back{background:linear-gradient(to top right,transparent 50%,#3B4669 50%,#2B3554 74%,#1A2239 100%)}
/* work pages */
.night .fc-hero-logo img,.night .bsf-logo{filter:brightness(0) invert(1)}
.night .bsf-logo{opacity:.94}
.night .weeks li{background:var(--card);border-color:var(--line)}
.night :not(.body) > .sec > h2:not(.sr){box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 12px 24px -16px rgba(0,0,0,.75)}
.night .home-link{box-shadow:inset 0 0 0 1px rgba(217,170,77,.28)}
/* the pixel-art app icons are drawn in cream for dark tiles: at night the tiles stay dark, lifted off the page */
.night .apps a{background:#25304F;box-shadow:inset 0 0 0 1px #36426B}
/* NCAAA's dark logo inside its chip gets a paper tile */
.night .tag-logo img{box-sizing:content-box;padding:2px 5px;border-radius:4px;background:#F4EFE4}
/* Word and Excel file marks in their lighter dark-mode shades (--fc, not --c: that one is the KPI counter, registered as an integer) */
.night .tag-file[style*="2B579A"]::before{background:#6FA0F0}
.night .tag-file[style*="217346"]::before{background:#4CC387}