/* AuroraDigi v4 — homepage set pieces. Tokens come from style.css. */

/* =========================================================
   1 · Waterline hero: paper above, the river below, the
   headline cut by the seam. Two stacked copies, each clipped.
   ========================================================= */
.wl{--seam:56%; --hs:clamp(56px,12vw,188px); position:relative; min-height:clamp(480px, calc(82svh - var(--nav-h)), 780px); display:grid; grid-template-rows:var(--seam) 1fr; background:var(--paper); overflow:clip;}
html[dir="rtl"] .wl{--hs:clamp(48px,10.4vw,168px);}
.wl-land{background:var(--paper);}
.wl-river{background:var(--field); color:var(--on-field); display:flex; flex-direction:column; justify-content:flex-end;}
.wl-stage{position:absolute; inset-inline:0; top:var(--seam); transform:translateY(-75%); padding-inline:var(--margin); z-index:2;}
.wl-title{display:grid; margin:0; font-size:var(--hs); line-height:.86; letter-spacing:-.05em; font-weight:800; text-align:center; text-transform:uppercase; max-width:none;}
html[dir="rtl"] .wl-title{line-height:1.22; letter-spacing:0; font-weight:700; text-transform:none;}
.wl-copy{grid-area:1/1; display:block;}
.wl-above{color:var(--ink); clip-path:inset(0 0 25% 0);}
.wl-below{color:var(--accent); clip-path:inset(75% 0 0 0);}
.lines .line{display:block; overflow:clip; padding-bottom:.08em; margin-bottom:-.08em;}
.lines [data-line]{display:block;}
.wl-foot{position:relative; z-index:3; display:flex; justify-content:space-between; align-items:flex-end; gap:24px 48px; padding-top:calc(var(--hs) * .5); padding-bottom:clamp(28px,4vw,48px);}
.wl-sub{color:var(--on-field); font-size:clamp(18px,1.45vw,21px); line-height:1.5; max-width:48ch; margin:0;}
.wl-cta{flex:none;}
@media (max-width:700px){
  .wl{--seam:44%; min-height:min(calc(80svh - var(--nav-h)), 600px); --hs:13.6vw;}
  html[dir="rtl"] .wl{--hs:13vw;}
  .wl-title{line-height:.9;}
  .wl-foot{flex-direction:column; align-items:stretch;}
  .wl-cta{width:100%;}
}
@media (prefers-reduced-motion:no-preference){
  .js .lines [data-line]{transform:translateY(105%); animation:line-up 760ms var(--ease-expo) forwards; animation-delay:calc(var(--i) * 80ms + 60ms);}
  .js .wl-foot{opacity:0; transform:translateY(16px); animation:fade-up 600ms var(--ease-out) 380ms forwards;}
}
/* faded Basra photo behind the whole hero */
.wl-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.16; z-index:1; pointer-events:none; filter:grayscale(.2);}
.wl-river{position:relative;}
/* three-line title: the seam cuts the last line */
.wl-3{--hs:clamp(52px,9vw,150px);}
html[dir="rtl"] .wl-3{--hs:clamp(48px,8.4vw,140px);}
.wl-3 .wl-stage{transform:translateY(-83.4%);}
.wl-3 .wl-above{clip-path:inset(0 0 16.6% 0);}
.wl-3 .wl-below{clip-path:inset(83.4% 0 0 0);}
.wl-3 .wl-foot{padding-top:calc(var(--hs) * .8);}
@media (max-width:700px){ .wl-3{--seam:58%; --hs:13.4vw;} html[dir="rtl"] .wl-3{--hs:12.4vw;} }
@keyframes line-up{to{transform:none;}}
@keyframes fade-up{to{opacity:1; transform:none;}}

/* =========================================================
   2 · Capabilities at poster scale
   ========================================================= */
.caps{padding-block:clamp(96px,16vh,200px);}
.caps-list{display:grid; gap:.35em; font-size:clamp(40px,5.2vw,84px);}
.caps-row{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); align-items:first baseline;}
.caps-row h2,.caps-name{grid-column:1 / span 8; font-size:1em; line-height:1; font-weight:800; letter-spacing:-.04em; margin:0;}
html[dir="rtl"] .caps-row h2,html[dir="rtl"] .caps-name{letter-spacing:0; font-weight:700; line-height:1.3;}
.caps-row h2{color:var(--muted); font-weight:500;}
.caps-name{color:var(--ink); text-decoration:none; transition:color var(--t-hover) ease;}
.caps-row p{grid-column:9 / span 4; font-size:17px; line-height:1.5; color:var(--ink); margin:0;}
.caps-row .caps-price{grid-row:2; font-weight:700; margin-top:4px;}
@media (hover:hover){
  .caps-list:hover .caps-name{color:var(--muted);}
  .caps-list .caps-row:hover .caps-name{color:var(--ink);}
  .caps-name:hover{text-decoration:underline; text-decoration-thickness:.06em; text-underline-offset:.12em; text-decoration-color:var(--accent);}
}
.caps-name:focus-visible{outline-offset:6px;}
.caps-ph{display:inline-block; vertical-align:-.04em; width:1.5em; height:.78em; margin-inline-start:.22em; overflow:clip; background:var(--tone);}
.caps-ph img{width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--ease-out);}
@media (hover:hover){ .caps-row:hover .caps-ph img{transform:scale(1.08);} }
@media (max-width:860px){
  .caps-list{font-size:11vw; gap:64px;}
  html[dir="rtl"] .caps-list{font-size:9.4vw;}
  .caps-row{display:flex; flex-direction:column;}
  .caps-row .caps-price{order:1; margin:6px 0 0; font-size:18px;}
  .caps-row .caps-desc{order:2;}
  .caps-row p{font-size:16px; margin-top:10px;}
  .caps-ph{display:none;}
}

/* =========================================================
   3 · Two languages, two giant letters
   ========================================================= */
.duo{padding-block:var(--sect); overflow:clip;}
.duo-head{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); align-items:start; margin-bottom:clamp(48px,7vw,104px);}
.duo-head h2{grid-column:1 / span 5; margin:0;}
.duo-head p{grid-column:7 / span 6; font-size:var(--t-lead); line-height:1.45; color:var(--ink); max-width:44ch; margin:0;}
.duo-pair{display:grid; gap:4px;}
.duo-say{margin:0; font-size:clamp(36px,5.6vw,92px); line-height:1.02; font-weight:800; letter-spacing:-.04em; padding:clamp(28px,4vw,56px) var(--margin); background:var(--tone); color:var(--ink); font-family:var(--font-en); text-wrap:balance;}
.duo-say.duo-ar{background:var(--field); color:var(--on-field); font-family:var(--font-ar); font-weight:700; letter-spacing:0; line-height:1.35; text-align:right;}
.duo .container{max-width:calc(var(--maxw) + 2 * var(--margin));}
@media (max-width:760px){
  .duo-head{display:block;}
  .duo-head h2{margin-bottom:16px;}
  .duo-say{font-size:24px; line-height:1.3;}
}

/* =========================================================
   4 · Basra, full bleed (with the shutter opening)
   ========================================================= */
.band-photo{margin:var(--sect) 0 0;}
.band-photo img{width:100%; height:clamp(200px,26vw,400px); object-fit:cover;}
.band-photo figcaption{position:absolute; inset-inline:0; bottom:0; padding-block:56px 22px; font-size:17px; font-weight:600; color:#fff; background:linear-gradient(to top, rgba(6,14,28,.62), rgba(6,14,28,0));}
.shutter{overflow:clip;}
@media (prefers-reduced-motion:no-preference){
  .js .shutter{clip-path:inset(0 0 100% 0); transition:clip-path 1100ms var(--ease-in-out);}
  .js .shutter img{transform:scale(1.1); transition:transform 1500ms var(--ease-soft);}
  .js .shutter.is-in{clip-path:inset(0);}
  .js .shutter.is-in img{transform:none;}
}
.band-photo{position:relative; overflow:clip;}
.band-photo.shutter img{display:block;}
@media (prefers-reduced-motion:no-preference){
  .js .band-photo.shutter{clip-path:inset(0 0 100% 0);}
  .js .band-photo.shutter.is-in{clip-path:inset(0);}
}

/* =========================================================
   5 · Sample designs: small index, large picture
   ========================================================= */
.work{padding-block:var(--sect);}
.work-grid{display:grid; grid-template-columns:minmax(0,38fr) minmax(0,62fr); gap:clamp(32px,4vw,72px); align-items:start;}
.work-index h2{font-size:clamp(34px,3.4vw,56px); line-height:1; margin-bottom:.4em;}
.work-index > p{max-width:36ch; margin-bottom:28px; color:var(--ink);}
.work-alt{background:var(--tone);}
.work-names{margin-bottom:28px;}
.work-names button{display:block; width:100%; text-align:start; font:inherit; font-size:clamp(19px,1.5vw,23px); font-weight:700; line-height:1.25; color:var(--muted); background:none; border:0; padding:11px 0; cursor:pointer; transition:color var(--t-hover) ease, padding var(--t-ui) var(--ease-out);}
.work-names button[aria-pressed="true"]{color:var(--ink); padding-inline-start:18px; box-shadow:inset 4px 0 0 var(--accent);}
html[dir="rtl"] .work-names button[aria-pressed="true"]{box-shadow:inset -4px 0 0 var(--accent);}
@media (hover:hover){ .work-names button:hover{color:var(--ink);} }
.work-view .stage{border-radius:0; background:var(--tone); aspect-ratio:16/11;}
.work-view .stage::before{display:none;}
.work-cap{margin:16px 0 0; color:var(--muted); max-width:60ch;}
.work-cap b{color:var(--ink);}
.work-pane[hidden]{display:none;}
@media (max-width:900px){ .work-grid{grid-template-columns:1fr;} }

/* =========================================================
   6 · Two audiences
   ========================================================= */
.aud2{padding-block:var(--sect); background:var(--tone);}
.aud2-head{max-width:900px; margin-bottom:clamp(40px,5vw,72px);}
.aud2-head h2{margin-bottom:.3em;}
.aud2-head .lead{color:var(--muted); margin:0;}
.aud2-pair{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); row-gap:56px;}
.aud2-col{grid-column:1 / span 6;}
.aud2-b{grid-column:8 / span 5; margin-top:clamp(0px,10vh,120px);}
.aud2-col img{width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:24px;}
.aud2-b img{aspect-ratio:4/5;}
.aud2-col h3{font-size:clamp(24px,2.2vw,32px); line-height:1.15; letter-spacing:-.02em; margin-bottom:.4em;}
.aud2-col p{color:var(--ink); max-width:52ch;}
@media (max-width:860px){ .aud2-col,.aud2-b{grid-column:1 / -1; margin-top:0;} .aud2-b img{aspect-ratio:4/3;} }

/* =========================================================
   7 · Process printed as a slip (used on every page)
   ========================================================= */
.slip-sec{overflow:clip;}
.slip-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); align-items:start;}
.slip-copy{grid-column:1 / span 5;}
.slip-copy h2{margin-bottom:.4em;}
.slip-copy p{max-width:34ch; font-size:var(--t-lead); line-height:1.45; color:var(--muted);}
.slip{grid-column:7 / span 5; max-width:500px; width:100%; background:var(--white); color:var(--ink); padding:32px 28px 56px; font-size:16px; font-variant-numeric:tabular-nums; clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),95% 100%,90% calc(100% - 14px),85% 100%,80% calc(100% - 14px),75% 100%,70% calc(100% - 14px),65% 100%,60% calc(100% - 14px),55% 100%,50% calc(100% - 14px),45% 100%,40% calc(100% - 14px),35% 100%,30% calc(100% - 14px),25% 100%,20% calc(100% - 14px),15% 100%,10% calc(100% - 14px),5% 100%,0 calc(100% - 14px));}
.section-navy .slip{color:var(--ink);}
.section-navy .slip p.slip-head,.section-navy .slip .slip-head span{color:var(--muted);}
.section-navy .slip-copy p{color:var(--on-field-muted);}
.slip-head{display:flex; justify-content:space-between; gap:12px; font-size:15px; color:var(--muted); margin:0 0 4px;}
.slip-head b{color:var(--ink);}
.slip h3{font-size:16px; font-weight:800; letter-spacing:0; margin:28px 0 8px;}
.slip li{display:flex; align-items:baseline; gap:8px; padding:5px 0;}
.slip li span{flex:0 1 auto; color:var(--ink);}
.slip li i{flex:1 1 24px; min-width:24px; height:1em; overflow:hidden; color:#8494AD; font-style:normal;}
.slip li i::after{content:"····································································"; letter-spacing:.18em; white-space:nowrap; display:block; line-height:1;}
.slip li b{flex:none; font-weight:700; white-space:nowrap;}
.slip-total{display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--ink); color:var(--paper); min-height:44px; padding:10px 14px; margin:28px -14px 0;}
.slip-total b{white-space:nowrap;}
.section-navy .slip p.slip-total{color:var(--paper);}
@media (max-width:900px){
  .slip-copy,.slip{grid-column:1 / -1;}
  .slip{margin-top:36px; max-width:none;}
  .slip li{flex-wrap:wrap;}
}

/* =========================================================
   8 · Price as a sentence + the builder
   ========================================================= */
.price{background:var(--field); color:var(--on-field); padding-block:var(--sect);}
.price-line{font-size:clamp(46px,7.4vw,124px); line-height:.98; letter-spacing:-.045em; max-width:13ch; margin-bottom:.45em; color:var(--on-field);}
html[dir="rtl"] .price-line{letter-spacing:0; line-height:1.25; max-width:15ch;}
.price-chip{display:inline-block; background:var(--accent); color:var(--ink); padding:0 .15em; line-height:1; white-space:nowrap;}
html[dir="rtl"] .price-chip{padding:.05em .2em;}
.price-sub{font-size:clamp(18px,1.4vw,20px); line-height:1.5; color:var(--on-field-muted); max-width:56ch; margin-bottom:clamp(40px,5vw,64px);}
.builder{display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:var(--gap); align-items:start;}
.builder fieldset{border:0; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px;}
.chip{position:relative; display:flex; flex-direction:column; gap:4px; background:var(--field-2); color:var(--on-field); padding:18px 18px 20px; cursor:pointer; transition:background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);}
.chip input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer;}
.chip-name{font-weight:700; font-size:17px;}
.chip-price{font-size:15px; color:var(--on-field-muted);}
.chip:has(input:checked){background:var(--accent); color:var(--ink);}
.chip:has(input:checked) .chip-price{color:var(--ink);}
.chip:has(input:focus-visible){outline:3px solid var(--paper); outline-offset:2px;}
.chip:active{transform:scale(.98);}
@media (hover:hover){ .chip:hover{background:#1B3C6E;} .chip:has(input:checked):hover{background:var(--accent-strong);} }
.chip::after{content:""; position:absolute; top:16px; inset-inline-end:16px; width:18px; height:18px; box-shadow:inset 0 0 0 2px currentColor;}
.chip:has(input:checked)::after{background:var(--ink); box-shadow:none; clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%);}
.builder-out{display:flex; flex-direction:column; align-items:stretch; gap:12px;}
.builder-label{margin:-4px 0 4px; font-size:15px; color:var(--on-field-muted);}
.builder-total{margin:0; font-size:clamp(40px,3.6vw,60px); font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--on-field);}
.builder-monthly{margin:0; font-size:20px; font-weight:700; color:var(--accent);}
.builder-hint{margin:0; font-size:15px; color:var(--on-field-muted);}
.builder:not(.is-empty) .builder-hint{visibility:hidden;}
.builder .btn{width:100%;}
.builder .btn-outline{background:var(--field-2); color:var(--on-field);}
@media (hover:hover){ .builder .btn-outline:hover{background:var(--paper); color:var(--ink);} }
.builder-more{color:var(--on-field); font-size:15px; font-weight:600; margin-top:4px;}
@media (max-width:1000px){ .builder{grid-template-columns:1fr;} .builder fieldset{grid-template-columns:repeat(2,minmax(0,1fr));} .builder-out{margin-top:40px;} }
@media (max-width:520px){ .builder fieldset{grid-template-columns:1fr;} .price-line{font-size:11vw;} .price-chip{display:block; width:max-content; margin-top:.08em;} }
@media (prefers-reduced-motion:no-preference){
  .js .price.is-ready .chip{transition-delay:0ms;}
}

/* FAQ on the homepage sits on the tone field */
.home .faq-read h2{font-size:clamp(28px,2.6vw,40px);}