:root
{
  --bg:#000;
  --surf:#0e121b;
  --line:rgba(255,255,255,.09);
  --fg:#f4f2ec;
  --muted:#98a2b8;
  --blue:#0059f8;
  --blue-hi:#4c8dff;
  --fold:#8fb7ef;
  --paper:#fcfaf6;
  --ink:#0a0c12;
  --ink-muted:#55607a;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"JetBrains Mono",monospace;
  --gut-l:max(20px,env(safe-area-inset-left,0px));
  --gut-r:max(20px,env(safe-area-inset-right,0px));
  --nav:60px;
  --bar:84px;
  color-scheme:dark
}
*
{
  box-sizing:border-box
}
body
{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.5 var(--display);
  padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom,0px))
}
body::before
{
  content:"";
  position:fixed;
  inset:0 0 auto;
  height:env(safe-area-inset-top,0px);
  z-index:80;
  background:var(--bg)
}
a
{
  color:inherit;
  text-decoration:none
}
h1,h2,h3,p
{
  margin:0
}
img
{
  display:block
}
.in
{
  padding-inline:var(--gut-l) var(--gut-r)
}
.mono
{
  font:400 12px/1.4 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase
}
em.s
{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.02em;
  font-size:1.08em
}
.btn
{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:54px;
  padding:0 28px;
  border-radius:14px;
  font-weight:700;
  letter-spacing:.05em;
  font-size:15px
}
.btn.pri
{
  background:var(--blue);
  color:#fff
}
.btn.pap
{
  background:var(--paper);
  color:var(--ink)
}
a:focus-visible,button:focus-visible,input:focus-visible
{
  outline:2px solid var(--blue-hi);
  outline-offset:3px
}
#bar
{
  position:fixed;
  left:0;
  top:env(safe-area-inset-top,0px);
  height:3px;
  width:100%;
  transform-origin:0 50%;
  transform:scaleX(0);
  background:var(--blue-hi);
  z-index:90
}
.ab-demo
{
  --black:#000;
  --white:#fff;
  --grey:#9aa3b5;
  --c:#00aeef;
  --m:#ec008c;
  --y:#fff200;
  --ar:"Almarai",var(--display);
  padding-top:calc(var(--nav) + env(safe-area-inset-top,0px));
  min-width:0
}
.ab-demo .sheetbox
{
  min-width:0
}
.ab-demo .txt
{
  min-width:0
}
.ab-demo .hero h1,.ab-demo .cta h2
{
  overflow-wrap:break-word
}
.ab-demo .stage .spec div
{
  flex-wrap:wrap
}
.ab-demo .sheetbox[dir=ltr]
{
  direction:ltr
}
.ab-demo .fin
{
  margin-inline:auto
}
.quote
{
  background:var(--blue);
  color:#fff;
  padding-block:14vh
}
.quote>.in
{
  max-width:1440px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:56px 64px
}
.quote .l
{
  flex:1 1 460px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:26px
}
.quote h2
{
  font-size:clamp(54px,9.4vw,150px);
  line-height:.9;
  letter-spacing:-.05em;
  font-weight:800;
  text-wrap:balance
}
.quote h2 em.s
{
  color:var(--paper)
}
.quote p
{
  color:#dce8ff;
  font-size:clamp(16px,1.5vw,20px);
  max-width:460px
}
.quote form
{
  flex:1 1 400px;
  min-width:0;
  max-width:560px
}
.quote .cat
{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px;
  padding:8px 14px;
  font-size:12px;
  color:#fff
}
.quote .cat i
{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  display:block
}
html[lang=ar]
{
  --display:"Almarai","Segoe UI",system-ui,sans-serif;
  --serif:"Aref Ruqaa",serif;
  --mono:"Almarai",sans-serif
}
html[lang=ar] body
{
  letter-spacing:normal
}
html[lang=ar] .quote h2
{
  line-height:1.22
}
html[dir=rtl] #bar
{
  transform-origin:100% 50%
}
@media(min-width:900px)
{
  :root
  {
    --nav:68px;
    --bar:0px
  }
}
.ab-demo .w
{
  padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))
}
.ab-demo .in
{
  padding-inline:0;
  min-width:0;
  max-width:1120px;
  margin:0 auto
}
.ab-demo .mono
{
  font:500 12px/1.4 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase
}
.ab-demo h1,.ab-demo h2,.ab-demo h3
{
  font-weight:800;
  letter-spacing:-.04em;
  text-wrap:balance
}
.ab-demo .hero
{
  padding-block:clamp(56px,12vw,130px) clamp(48px,9vw,100px)
}
.ab-demo .hero h1
{
  font-size:clamp(42px,10.5vw,120px);
  line-height:.95;
  max-width:12ch
}
.ab-demo .hero p
{
  margin-top:26px;
  color:var(--grey);
  font-size:clamp(17px,2.2vw,22px);
  line-height:1.5;
  max-width:34ch
}
.ab-demo .hero .mono
{
  color:var(--blue-hi);
  margin-bottom:22px
}
.ab-demo .stage
{
  padding-block:clamp(48px,8vw,100px)
}
.ab-demo .stage .in
{
  display:grid;
  gap:36px;
  align-items:center
}
@media (min-width:860px)
{
  .ab-demo .stage .in
  {
    grid-template-columns:1fr 1fr;
    gap:72px
  }
  .ab-demo .stage.rev .txt
  {
    order:2
  }
}
.ab-demo .stage .tag
{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:20px
}
.ab-demo .stage .tag span
{
  border:1px solid currentColor;
  border-radius:99px;
  padding:6px 12px
}
.ab-demo .stage h2
{
  font-size:clamp(40px,8vw,88px);
  line-height:.95
}
.ab-demo .stage p.d
{
  margin-top:20px;
  font-size:clamp(17px,2vw,20px);
  line-height:1.55;
  max-width:34ch
}
.ab-demo .stage .spec
{
  margin-top:26px;
  display:grid;
  gap:0;
  border-top:1px solid currentColor;
  max-width:380px
}
.ab-demo .stage .spec div
{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:11px 0;
  border-bottom:1px solid currentColor;
  font:500 12px var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase
}
.ab-demo .s1
{
  background:var(--black);
  color:var(--white)
}
.ab-demo .s1 .tag
{
  color:var(--white)
}
.ab-demo .s1 h2.about-accent
{
  color:var(--blue)
}
.ab-demo .s1 p.d
{
  color:var(--grey)
}
.ab-demo .s1 .spec
{
  color:#2B3140
}
.ab-demo .s1 .spec div
{
  color:var(--grey);
  border-color:#2B3140
}
.ab-demo .s1 .spec
{
  border-color:#2B3140
}
.ab-demo .s2
{
  background:var(--white);
  color:var(--black)
}
.ab-demo .s2 .tag
{
  color:var(--black)
}
.ab-demo .s2 h2.about-accent
{
  color:var(--blue)
}
.ab-demo .s2 p.d
{
  color:#4A5266
}
.ab-demo .s2 .spec div
{
  color:#4A5266;
  border-color:#D5D9E3
}
.ab-demo .s2 .spec
{
  border-color:#D5D9E3
}
.ab-demo .s3
{
  background:var(--blue);
  color:var(--white)
}
.ab-demo .s3 .tag
{
  color:#fff
}
.ab-demo .s3 p.d
{
  color:#DCE8FF
}
.ab-demo .s3 .spec div
{
  color:#DCE8FF;
  border-color:rgba(255,255,255,.35)
}
.ab-demo .s3 .spec
{
  border-color:rgba(255,255,255,.35)
}
.ab-demo .sheetbox
{
  --p:1;
  display:grid;
  place-items:center
}
.ab-demo .sheetbox svg,.ab-demo .fin
{
  width:min(100%,360px);
  height:auto;
  display:block
}
.ab-demo .s1 .ln
{
  stroke:#0A0C12;
  stroke-width:2;
  fill:none;
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - var(--p));
  stroke-linecap:round
}
.ab-demo .s1 .tx
{
  font:500 9px var(--mono);
  letter-spacing:.12em;
  fill:#6B7388
}
.ab-demo .s1 .cm
{
  stroke:#fff;
  stroke-width:1
}
.ab-demo .s1 .bl
{
  stroke:var(--blue);
  stroke-width:1;
  stroke-dasharray:4 3;
  fill:none
}
.ab-demo .s2 .sheetbox svg
{
  filter:drop-shadow(0 24px 40px rgba(5,6,8,.22))
}
.ab-demo .s2 .L
{
  mix-blend-mode:multiply
}
.ab-demo .lc
{
  transform:translate(calc((1 - var(--p))*-90px),calc((1 - var(--p))*-40px));
  opacity:clamp(0,calc(var(--p)*4),1)
}
.ab-demo .lm
{
  transform:translate(calc((1 - var(--p))*90px),calc((1 - var(--p))*-40px));
  opacity:clamp(0,calc(var(--p)*4 - .5),1)
}
.ab-demo .ly
{
  transform:translate(0,calc((1 - var(--p))*90px));
  opacity:clamp(0,calc(var(--p)*4 - 1),1)
}
.ab-demo .lk
{
  opacity:clamp(0,calc(var(--p)*4 - 2),1)
}
.ab-demo .sw
{
  opacity:clamp(0,calc(var(--p)*5 - 3),1)
}
.ab-demo .fin
{
  --p:1;
  perspective:1100px;
  aspect-ratio:3/4;
  position:relative;
  max-width:360px
}
.ab-demo .fin .pg
{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:1fr 1fr
}
.ab-demo .fin .l,.ab-demo .fin .r
{
  position:relative;
  overflow:hidden;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
.ab-demo .fin .l
{
  background:#fff;
  color:var(--black);
  border-radius:8px 0 0 8px
}
.ab-demo .fin .r
{
  background:var(--black);
  color:#fff;
  border-radius:0 8px 8px 0;
  transform-origin:0 50%;
  transform:rotateY(calc((1 - var(--p))*-150deg));
  box-shadow:0 30px 50px -20px rgba(0,10,70,.6)
}
.ab-demo .fin .l::after
{
  content:"";
  position:absolute;
  inset:0 0 0 auto;
  width:30px;
  background:linear-gradient(90deg,transparent,rgba(5,6,8,.18))
}
.ab-demo .fin h4
{
  margin:0;
  font-size:26px;
  line-height:.95;
  letter-spacing:-.04em
}
.ab-demo .fin .mono
{
  font-size:9px
}
.ab-demo .fin .gl
{
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(calc((1 - var(--p))*-120% + 40%));
  mix-blend-mode:soft-light;
  pointer-events:none
}
.ab-demo .fin .r .gl
{
  mix-blend-mode:screen;
  opacity:.45
}
.ab-demo .fin .dot
{
  width:34px;
  height:34px;
  border-radius:9px;
  background:var(--blue)
}
.ab-demo .q
{
  text-align:center;
  background:var(--white);
  color:var(--black);
  padding-block:clamp(60px,10vw,120px)
}
.ab-demo .q blockquote
{
  margin:0 auto;
  font-size:clamp(30px,6vw,64px);
  line-height:1.02;
  letter-spacing:-.04em;
  font-weight:800;
  max-width:20ch
}
.ab-demo .q blockquote em
{
  display:block;
  color:var(--blue);
  font-style:normal
}
.ab-demo .q .by
{
  margin-top:26px;
  color:#4A5266
}
.ab-demo .cta
{
  background:var(--black);
  padding-block:clamp(60px,10vw,120px)
}
.ab-demo .cta h2
{
  font-size:clamp(40px,9vw,104px);
  line-height:.95
}
.ab-demo .cta h2 em
{
  color:var(--blue-hi);
  font-style:normal;
  display:block
}
.ab-demo .btn
{
  all:unset;
  cursor:pointer;
  display:inline-block;
  margin-top:30px;
  background:var(--blue);
  color:#fff;
  font:800 15px var(--display);
  letter-spacing:.04em;
  padding:18px 30px;
  border-radius:99px
}
.ab-demo .btn:focus-visible
{
  outline:3px solid #fff;
  outline-offset:3px
}
html[lang=ar] .ab-demo,html[lang=ar] .ab-demo h1,html[lang=ar] .ab-demo h2,html[lang=ar] .ab-demo h3,html[lang=ar] .ab-demo h4,html[lang=ar] .ab-demo p,html[lang=ar] .ab-demo blockquote
{
  font-family:var(--ar);
  letter-spacing:0
}
html[lang=ar] .ab-demo h1,html[lang=ar] .ab-demo h2,html[lang=ar] .ab-demo blockquote
{
  line-height:1.3
}
html[lang=ar] .ab-demo .mono,html[lang=ar] .ab-demo .spec div
{
  font-family:var(--ar);
  letter-spacing:0;
  text-transform:none
}
@media (prefers-reduced-motion:reduce)
{
  .ab-demo .sheetbox,.ab-demo .fin
  {
    --p:1 !important
  }
}
/* Keep the bot trap out of layout without extending the page in RTL. */
.quote .vp-quote-form
{
  position:relative
}
.quote .vp-quote-form .q-honey
{
  inset-inline-start:0;
  top:0;
  clip-path:inset(50%);
  pointer-events:none
}
#contact
{
  scroll-margin-top:calc(var(--nav) + 16px)
}
.ab-demo .gloss-clip
{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:8px;
  pointer-events:none
}
/* Match the site's primary type and regular accent typefaces. */
.ab-demo :is(.q blockquote em.s,.cta h2 em.s)
{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  letter-spacing:-.02em
}
html[lang=ar] .ab-demo :is(.q blockquote em.s,.cta h2 em.s)
{
  font-family:"Aref Ruqaa",serif;
  font-weight:400;
  font-style:normal;
  font-synthesis:none;
  letter-spacing:0
}
@media(max-width:899px)
{
  .ab-demo:has(> .hero.has-photo)
  {
    padding-top:0
  }
  .ab-demo .hero.has-photo
  {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding-top:calc(var(--nav) + env(safe-area-inset-top,0px) + clamp(56px,12vw,130px))
  }
  .ab-demo .about-hero-photo
  {
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none
  }
  .ab-demo .about-hero-photo img
  {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center
  }
  .ab-demo .about-hero-photo::after
  {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.55))
  }
  .ab-demo .hero.has-photo .mono
  {
    color:var(--fold)
  }
  .ab-demo .hero.has-photo p
  {
    color:#dce8ff
  }
  body:has(.about-hero-photo):not(.about-hero-scrolled) .nav,
  body:has(.about-hero-photo):not(.about-hero-scrolled)::before
  {
    background:transparent;
    border-bottom-color:transparent
  }
}
/* Editable hero highlight and stage names use the approved regular accent face. */
.ab-demo .stage h2.about-accent,.ab-demo .hero h1 .about-accent
{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  letter-spacing:-.02em
}
.ab-demo .hero h1 .about-accent
{
  display:block;
  color:var(--fold)
}
html[lang=ar] .ab-demo .stage h2.about-accent,html[lang=ar] .ab-demo .hero h1 .about-accent
{
  font-family:"Aref Ruqaa",serif;
  font-weight:400;
  font-style:normal;
  font-synthesis:none;
  letter-spacing:0;
  line-height:1.3
}

/* Larger screens follow the approved mobile identity; mobile rules stay unchanged. */
@media (min-width: 900px) {
  .ab-demo .w { padding-inline: var(--gut-l) var(--gut-r); }
  .ab-demo .in { max-width: 1224px; }
  .ab-demo:has(> .hero.has-photo) { padding-top: 0; }
  .ab-demo .hero { text-align: center; padding-block: 88px 80px; }
  .ab-demo .hero h1 { max-width: 1000px; margin-inline: auto; font-size: clamp(64px, 7vw, 104px); }
  .ab-demo .hero p { margin-inline: auto; max-width: 52ch; font-size: clamp(18px, 1.6vw, 22px); }
  .ab-demo .hero.has-photo { position: relative; isolation: isolate; overflow: hidden; min-height: min(820px, 90svh); display: grid; align-items: center; padding-top: calc(var(--nav) + 64px); }
  .ab-demo .about-hero-photo { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .ab-demo .about-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .ab-demo .about-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.55)); }
  .ab-demo .hero.has-photo .mono { color: var(--fold); }
  .ab-demo .hero.has-photo p { color: #dce8ff; }
  body:has(.about-hero-photo):not(.about-hero-scrolled) .nav,
  body:has(.about-hero-photo):not(.about-hero-scrolled)::before { background: transparent; border-bottom-color: transparent; }
  .ab-demo .stage .in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); }
  .ab-demo .stage h2 { font-size: clamp(52px, 5.5vw, 80px); }
  .ab-demo .stage .sheetbox svg, .ab-demo .fin { width: min(100%, 400px); max-width: 400px; }
  .ab-demo .q blockquote { max-width: 26ch; font-size: clamp(40px, 4.3vw, 64px); }
  .ab-demo .cta { text-align: center; }
  .ab-demo .cta h2 { max-width: 1000px; margin-inline: auto; font-size: clamp(56px, 6vw, 88px); }
  .quote { padding-block: clamp(72px, 8vw, 120px); }
  .quote > .in { max-width: 1312px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
  .quote h2 { font-size: clamp(64px, 7vw, 104px); }
  .quote form { width: 100%; justify-self: end; }
}