/* Al Awael — small additions only. site.css is the design system and is never
   modified. Everything here reuses its variables and keeps its visual language. */

/* ───────── next/image `fill` parity ─────────
   site.css was authored against Next.js <Image fill>, which emits
   position:absolute; inset:0; width:100%; height:100% on the <img>.
   A plain <img> has none of that, so every art-directed container would
   render the image at its natural size and burst the layout. This rule
   reproduces exactly what `fill` did, for the containers that relied on it.
   It changes no site.css declaration — it supplies the one the markup lost. */
.hero > img,
.hero.brandhero .side img,
.phero > img,
.door img,
.slide img,
.atile img,
.acard img,
.ptile img,
.ph img,
.gallery figure img,
.plaque figure img,
.chapter.pic figure img,
.frow .ph img,
.devcard .strip img,
.mosaic button img{
  position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover
}
/* Every one of those containers already carries its own positioning in
   site.css, so nothing here re-declares it — overriding .side's
   position:absolute would collapse the hero art to zero height. */
.lightbox figure img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:contain}

/* video block on the campaign page */
.vidbox{position:relative;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;
  border:1px solid var(--line);background:linear-gradient(135deg,rgba(11,49,89,.55),rgba(3,25,50,.55));padding:clamp(20px,3vw,34px)}
.vidbox video{inline-size:100%;block-size:auto;aspect-ratio:9/16;display:block;background:#000D1C;border:1px solid var(--line2)}
.vidbox h2{margin-top:0}
.vidbox p{color:var(--ink2)}
@media (max-width:900px){.vidbox{grid-template-columns:1fr}}

/* the two contracts, side by side */
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.two>article{border:1px solid var(--line2);padding:clamp(24px,3.2vw,40px);background:linear-gradient(160deg,rgba(11,49,89,.55),rgba(3,25,50,.35));
  transition:border-color .3s,transform .4s}
.two>article:hover{border-color:var(--gold);transform:translateY(-4px)}
.two .no{font-size:13px;letter-spacing:.2em;color:var(--gold2)}
.two h3{font-size:clamp(21px,2.2vw,26px);font-weight:300;margin:6px 0 10px}
.two p{color:var(--ink2);font-size:15.5px}
.two .opt{display:inline-block;margin-top:14px;font-size:12.5px;color:var(--gold2);border:1px solid var(--line);padding:2px 12px;border-radius:999px}
@media (max-width:900px){.two{grid-template-columns:1fr}}

/* price table */
.ptable{inline-size:100%;border-collapse:collapse;font-size:15.5px}
.ptable th,.ptable td{padding:16px 14px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.ptable thead th{font-size:13px;color:var(--gold2);font-weight:400;letter-spacing:.03em;border-bottom-color:var(--gold3)}
.ptable td b{color:var(--gold2);font-weight:400;font-size:19px}
.ptable td small{display:block;color:var(--ink2);font-size:12.5px;margin-top:4px}
.ptable .none{color:var(--ink2);font-size:14px}
.tablewrap{overflow-x:auto;scrollbar-width:thin}
@media (max-width:700px){.ptable{min-inline-size:560px}}

/* FAQ */
.faq{display:grid;gap:12px;max-width:80ch}
.faq details{border:1px solid var(--line2);background:rgba(7,40,76,.4);padding:18px 22px;transition:border-color .3s}
.faq details[open]{border-color:var(--line)}
.faq summary{cursor:pointer;font-size:17px;color:var(--ivory);font-weight:400;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold2);font-size:22px;line-height:1;flex:none}
.faq details[open] summary::after{content:"−"}
.faq p{color:var(--ink2);margin-top:12px;font-size:15.5px;line-height:2}

/* form feedback + honeypot timing field */
.form .errlist{list-style:none;padding:12px 16px;margin:0 0 6px;border:1px solid rgba(255,154,140,.45);background:rgba(255,154,140,.08);font-size:14px}
.form .errlist li{color:#FF9A8C;line-height:1.9}
.form .hint{font-size:12.5px;color:var(--ink2);line-height:1.8}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:700px){.form .row2{grid-template-columns:1fr}}

/* the thanks page */
.donebox{max-width:70ch;margin-inline:auto;text-align:center;border:1px solid var(--line);padding:clamp(30px,5vw,56px);
  background:linear-gradient(180deg,var(--panel2),var(--panel));box-shadow:0 30px 80px rgba(0,0,0,.4)}
.donebox h1{font-size:clamp(28px,3.6vw,44px);font-weight:200;margin-bottom:14px}
.donebox p{color:var(--ink2);margin-bottom:10px}
.donebox .btn{margin-top:26px}
.donebox .tel{margin-top:22px;direction:ltr;font-size:19px;color:var(--gold2)}

/* small helpers */
.note{color:var(--ink2);font-size:14px;line-height:1.9;max-width:78ch}
.notebox{border-inline-start:2px solid var(--gold3);padding-inline-start:16px;margin-top:22px;color:var(--ink2);font-size:14.5px;line-height:1.95;max-width:78ch}
.ctarow{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.sec.tight{padding-block:clamp(40px,5vw,64px)}