/* ==========================================================================
   Arco Gold — Option D
   Structure, palette and motion modelled on the Saiin renovation template:
   floating header pill, photo hero, blue accent cards, lavender panels.
   ========================================================================== */

:root{
  --blue:       #016edc;
  --blue-deep:  #014284;
  --blue-dark:  #00334e;
  --navy:       #1c293f;
  --lav:        #f0f0fa;
  --grey:       #f5f5f5;
  --white:      #ffffff;
  --body:       #5a6478;
  --line:       #e5e7eb;

  --wrap: 1320px;
  --r: 10px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms;
  --dur-base: 900ms;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--white); color:var(--body);
  font-family:'Fustat',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.72; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ color:var(--navy); font-weight:700; line-height:1.16; margin:0 0 .5em; letter-spacing:-.02em; }
h1{ font-size:clamp(2.4rem,4.6vw,3.6rem); }
h2{ font-size:clamp(1.9rem,3.1vw,2.7rem); }
h3{ font-size:1.22rem; }
p{ margin:0 0 1em; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }

.wrap{ width:min(100% - 40px,var(--wrap)); margin-inline:auto; }
.sp{ padding:clamp(64px,8vw,110px) 0; }
.lav{ background:var(--lav); }
.eyebrow{
  display:flex; align-items:center; gap:12px; margin:0 0 14px;
  font-size:.86rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue);
}
.eyebrow::before{ content:""; width:34px; height:2px; background:var(--blue); flex:none; }
.eyebrow.center{ justify-content:center; }
.lede{ max-width:62ch; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  min-height:54px; padding:0 26px; border:0; cursor:pointer; border-radius:6px;
  font:inherit; font-weight:700; font-size:.95rem; letter-spacing:.02em;
  background:var(--blue); color:#fff;
  transition:background-color var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease-soft);
}
.btn:hover{ background:var(--blue-deep); color:#fff; }
.btn:active{ transform:translateY(1.5px); }
.btn i{ transition:transform var(--dur-fast) var(--ease-soft); font-style:normal; }
.btn:hover i{ transform:translate(3px,-3px); }
.btn--white{ background:#fff; color:var(--navy); }
.btn--white:hover{ background:var(--lav); color:var(--navy); }
.btn--ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); }
.btn--ghost:hover{ background:#fff; color:var(--navy); }

/* ---------- header ---------- */
.site-header{ position:absolute; top:22px; left:0; right:0; z-index:60; transition:top var(--dur-fast) var(--ease-soft); }
.site-header.is-stuck{ position:fixed; top:0; }
.header-pill{
  background:#fff; border-radius:8px; padding:0 12px 0 26px;
  display:flex; align-items:center; gap:24px; min-height:76px;
  box-shadow:0 12px 34px -18px rgba(28,41,63,.45);
  transition:border-radius var(--dur-fast) var(--ease-soft),box-shadow var(--dur-fast) var(--ease-soft);
}
.is-stuck .header-pill{ border-radius:0 0 8px 8px; box-shadow:0 14px 30px -20px rgba(28,41,63,.6); }
.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.brand__mark{ width:38px; height:38px; border-radius:7px; background:var(--blue); display:grid; place-items:center; }
.brand__mark svg{ width:21px; height:21px; display:block; }
.brand__name{ display:block; font-weight:800; font-size:1.16rem; color:var(--navy); line-height:1.15; letter-spacing:-.02em; }
.brand__sub{ display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--body); }
.nav{ display:flex; gap:30px; font-weight:600; color:var(--navy); font-size:.98rem; }
.nav a{ position:relative; padding:6px 0; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--blue);
  transform:scaleX(0); transform-origin:left; transition:transform var(--dur-fast) var(--ease-soft);
}
.nav a:hover::after{ transform:scaleX(1); }
.header-cta{ display:inline-flex; }
.nav-toggle{
  display:none; width:48px; height:48px; border:0; border-radius:6px; background:var(--lav);
  color:var(--navy); font-size:1.3rem; cursor:pointer;
}
.mobile-nav{ display:none; background:#fff; border-radius:0 0 8px 8px; padding:6px 22px 20px; box-shadow:0 18px 34px -22px rgba(28,41,63,.5); }
.mobile-nav.is-open{ display:block; }
.mobile-nav a{ display:block; padding:13px 0; border-top:1px solid var(--line); font-weight:600; color:var(--navy); }
.mobile-nav .btn{ width:100%; justify-content:center; margin-top:14px; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; background:var(--navy); }
.hero__bg{ position:absolute; inset:-8% 0 -8% 0; overflow:hidden; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(97deg,rgba(11,20,35,.93) 0%,rgba(11,20,35,.82) 38%,rgba(11,20,35,.42) 72%,rgba(11,20,35,.25) 100%);
}
.hero .wrap{ position:relative; z-index:3; }
.hero__inner{ position:relative; z-index:2; padding:clamp(150px,17vw,230px) 0 clamp(120px,13vw,180px); max-width:760px; }
.hero h1{ color:#fff; }
.hero p{ color:#c9d2e0; font-size:1.08rem; max-width:52ch; }
.hero .eyebrow{ color:#fff; }
.hero .eyebrow::before{ background:#fff; }

/* blue help card, overlapping the hero foot */
/* zero-height rail so the card can hang over the hero without adding white space */
.help-wrap{ position:relative; z-index:10; height:0; }
.help-card{
  position:absolute; right:0; bottom:-58px; width:min(420px,100%); margin:0;
  background:var(--blue); color:#fff; border-radius:var(--r); padding:28px 30px;
  box-shadow:0 30px 50px -28px rgba(1,20,40,.9);
}
.help-card h3{ color:#fff; font-size:1.3rem; margin-bottom:8px; }
.help-card p{ color:#d6e6fb; font-size:.98rem; margin-bottom:18px; }
.help-card__phone{ display:flex; align-items:center; gap:14px; }
.help-card__icon{ width:52px; height:52px; flex:none; border-radius:50%; background:#fff; display:grid; place-items:center; }
.help-card__icon svg{ width:23px; height:23px; display:block; }
.help-card__phone span{ display:block; font-size:.85rem; color:#cfe2fa; }
.help-card__phone b{ font-size:1.18rem; letter-spacing:.01em; }

/* asterisk marquee */
.marquee{ background:var(--navy); color:#fff; overflow:hidden; padding:22px 0; }
.marquee__track{ display:flex; gap:0; width:max-content; animation:slide 34s linear infinite; }
.marquee__track span{ display:inline-flex; align-items:center; gap:34px; padding-right:34px; font-size:1.12rem; font-weight:600; white-space:nowrap; }
.marquee__track span::after{ content:"✳"; color:var(--blue); font-size:1.1rem; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ---------- about ---------- */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; }
.about__media{ position:relative; }
.about__media .shot{ border-radius:var(--r); overflow:hidden; }
.rating-badge{
  position:absolute; right:18px; bottom:18px; background:var(--blue); color:#fff;
  border-radius:8px; padding:16px 20px; display:flex; align-items:center; gap:14px;
  box-shadow:0 18px 34px -20px rgba(1,66,132,.9);
}
.rating-badge__score{ font-size:1.5rem; font-weight:800; line-height:1; }
.rating-badge__stars{ color:#ffc94d; letter-spacing:2px; font-size:.9rem; }
.rating-badge p{ margin:0; font-size:.82rem; color:#d6e6fb; max-width:16ch; }
.about__boxes{ display:grid; grid-template-columns:1fr 1fr; gap:26px; background:var(--lav); border-radius:var(--r); padding:28px; margin-top:30px; }
.about__box h3{ font-size:1.05rem; margin-bottom:6px; }
.about__box p{ font-size:.94rem; margin:0; }
.icon-chip{ width:48px; height:48px; border-radius:50%; background:#fff; display:grid; place-items:center; margin-bottom:14px; }
.icon-chip svg{ width:23px; height:23px; display:block; }

/* ---------- section heads with a side button ---------- */
.head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:26px; margin-bottom:46px; }
.head-row h2{ margin:0; max-width:20ch; }

/* ---------- services ---------- */
.services{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.service{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 26px 26px; transition:transform var(--dur-fast) var(--ease-soft),box-shadow var(--dur-fast) var(--ease-soft); }
.service:hover{ transform:translateY(-6px); box-shadow:0 26px 44px -30px rgba(28,41,63,.55); }
.service__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; min-height:78px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.service__top h3{ margin:0; max-width:14ch; }
.service__icon{ width:46px; height:46px; flex:none; border-radius:8px; background:var(--lav); display:grid; place-items:center; transition:background-color var(--dur-fast) var(--ease-soft); }
.service:hover .service__icon{ background:var(--blue); }
.service__icon svg{ width:23px; height:23px; display:block; stroke:var(--blue); transition:stroke var(--dur-fast) var(--ease-soft); }
.service:hover .service__icon svg{ stroke:#fff; }
.service p{ font-size:.96rem; margin:16px 0 20px; }
.service__shot{ border-radius:8px; overflow:hidden; aspect-ratio:16/10; }
.service__shot img{ width:100%; height:100%; object-fit:cover; transition:transform 700ms var(--ease-out); }
.service:hover .service__shot img{ transform:scale(1.05); }

/* ---------- process ---------- */
.process{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; align-items:start; }
.step__flag{ position:relative; display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.step__num{
  width:62px; height:62px; background:var(--blue); color:#fff; font-size:1.6rem; font-weight:800;
  display:grid; place-items:center; border-radius:6px 6px 0 6px; position:relative;
}
.step__num::after{ content:""; position:absolute; right:0; bottom:-11px; border-width:0 12px 11px 0; border-style:solid; border-color:transparent var(--blue-deep) transparent transparent; }
.step__icon{ width:52px; height:52px; border-radius:50%; background:var(--lav); display:grid; place-items:center; }
.step__icon svg{ width:23px; height:23px; display:block; stroke:var(--blue); }
.step__body{ background:var(--lav); border-radius:var(--r); padding:24px 24px 26px; }
.step__body h3{ font-size:1.05rem; }
.step__body p{ font-size:.94rem; margin:0; }

/* ---------- work ---------- */
.work{ background:var(--blue-deep); color:#fff; }
.work h2,.work h3{ color:#fff; }
.work .eyebrow{ color:#fff; }
.work .eyebrow::before{ background:#fff; }
.work-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
.work-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:var(--r); padding:14px 14px 22px; }
.work-card__shot{ border-radius:8px; overflow:hidden; aspect-ratio:16/10; margin-bottom:18px; }
.work-card__shot img{ width:100%; height:100%; object-fit:cover; transition:transform 800ms var(--ease-out); }
.work-card:hover .work-card__shot img{ transform:scale(1.045); }
.work-card h3{ font-size:1.14rem; padding:0 8px; margin-bottom:6px; }
.work-card p{ font-size:.94rem; color:#c5d6ea; padding:0 8px; margin:0; }

/* image shine sweep, as in the reference */
.shine{ position:relative; overflow:hidden; }
.shine::after{
  content:""; position:absolute; top:50%; left:50%; width:200%; height:0;
  background:rgba(255,255,255,.28); transform:translate(-50%,-50%) rotate(-45deg); z-index:2; pointer-events:none;
}
.shine:hover::after{ height:250%; transition:all 700ms linear; background:transparent; }

/* ---------- testimonials ---------- */
.testi{ display:grid; grid-template-columns:1.35fr .65fr; background:#fff; border-radius:var(--r); overflow:hidden; }
.testi__slides{ padding:clamp(28px,4vw,46px); }
.testi__slide{ display:none; }
.testi__slide.is-active{ display:block; animation:fadeUp 520ms var(--ease-out) both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.testi__stars{ color:#f0a500; letter-spacing:3px; margin-bottom:16px; }
.testi__slide blockquote{ margin:0 0 24px; font-size:clamp(1.05rem,1.5vw,1.24rem); color:var(--navy); line-height:1.6; }
.testi__who{ display:flex; align-items:center; gap:14px; padding-top:20px; border-top:1px solid var(--line); }
.testi__avatar{ width:52px; height:52px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-weight:800; }
.testi__who b{ display:block; color:var(--navy); }
.testi__who span{ font-size:.9rem; }
.testi__counts{ background:var(--grey); padding:clamp(26px,3vw,40px); display:grid; align-content:center; gap:26px; }
.count b{ display:block; font-size:clamp(1.9rem,3vw,2.5rem); font-weight:800; color:var(--blue); line-height:1; }
.count span{ font-size:.92rem; }
.testi__nav{ display:flex; gap:12px; justify-content:center; margin-top:26px; }
.testi__nav button{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--navy);
  font-size:1.1rem; cursor:pointer; transition:background-color var(--dur-fast) var(--ease-soft),color var(--dur-fast) var(--ease-soft);
}
.testi__nav button:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }

/* ---------- faq ---------- */
.faq{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:start; }
.faq__item{ border:1px solid var(--line); border-radius:8px; margin-bottom:14px; background:#fff; }
.faq__q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer; font:inherit; font-weight:700; color:var(--navy);
  padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq__q i{ font-style:normal; color:var(--blue); font-size:1.3rem; transition:transform var(--dur-fast) var(--ease-soft); }
.faq__item.is-open .faq__q i{ transform:rotate(45deg); }
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 320ms var(--ease-out); }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
.faq__a p{ margin:0; padding:0 22px 22px; font-size:.97rem; }

/* ---------- cta + form ---------- */
.cta{ position:relative; overflow:hidden; background:var(--navy); color:#fff; }
.cta__bg{ position:absolute; inset:-8% 0; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.cta::after{ content:""; position:absolute; inset:0; background:linear-gradient(94deg,rgba(11,20,35,.94),rgba(1,66,132,.86)); }
.cta__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:center; }
.cta h2{ color:#fff; }
.cta p{ color:#cfd8e6; }
.cta .eyebrow{ color:#fff; }
.cta .eyebrow::before{ background:#fff; }
.cta__list li{ padding:9px 0 9px 30px; position:relative; color:#dbe3ee; }
.cta__list li::before{ content:"✓"; position:absolute; left:0; color:#7fc0ff; font-weight:700; }
.form{ background:#fff; border-radius:var(--r); padding:clamp(24px,3vw,38px); }
.form h3{ margin-bottom:20px; }
.row{ display:flex; flex-wrap:wrap; gap:16px; }
.field{ flex:1 1 200px; margin-bottom:16px; }
.field label{ display:block; font-size:.88rem; font-weight:700; color:var(--navy); margin-bottom:7px; }
.field input,.field select,.field textarea{
  width:100%; min-height:52px; padding:12px 14px; font:inherit; font-size:.98rem; color:var(--navy);
  background:var(--grey); border:1px solid var(--line); border-radius:6px;
}
.field textarea{ min-height:104px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(1,110,220,.16); }
.form .btn{ width:100%; justify-content:center; }
.form__note{ font-size:.86rem; margin:14px 0 0; }

/* ---------- footer ---------- */
.site-footer{ background:var(--navy); color:#b9c2d1; padding:clamp(52px,6vw,80px) 0 26px; }
.site-footer h4{ color:#fff; font-size:1.05rem; margin:0 0 16px; }
.site-footer a:hover{ color:var(--blue); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:38px; }
.site-footer li{ padding:5px 0; font-size:.97rem; }
.site-footer .brand__name{ color:#fff; }
.site-footer .brand__sub{ color:#8e99ab; }
.colophon{ margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:10px 26px; font-size:.88rem; color:#8e99ab; }
.colophon .end{ margin-left:auto; }

/* ---------- scroll animation ---------- */
.anim-ready [data-anim]{ opacity:0; }
.anim-ready [data-anim="fade-up"]{ transform:translateY(34px); }
.anim-ready [data-anim="fade-right"]{ transform:translateX(-38px); }
.anim-ready [data-anim="fade-left"]{ transform:translateX(38px); }
.anim-ready [data-anim="zoom-in"]{ transform:scale(.94); }
[data-anim]{
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
  transition-delay:calc(var(--i,0) * 110ms);
}
[data-anim].is-in{ opacity:1; transform:none; }

/* banner images settle in; no clipping, so an interrupted transition can never
   leave half a photo on screen */
.anim-ready .reveal-img img{ opacity:0; transform:scale(1.06); }
.reveal-img img{ transition:opacity 900ms var(--ease-out),transform 1100ms var(--ease-out); }
.reveal-img.is-in img{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-anim]{ opacity:1 !important; transform:none !important; }
  .reveal-img img{ opacity:1 !important; transform:none !important; }
  .marquee__track{ animation:none; }
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav,.header-cta{ display:none; }
  .nav-toggle{ display:block; }
  .services,.process{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about,.faq,.cta__inner{ grid-template-columns:1fr; }
  .about__media{ order:-1; }
  .testi{ grid-template-columns:1fr; }
  .help-wrap{ height:auto; background:var(--navy); }
  .help-wrap > .wrap{ padding-bottom:28px; }
  .help-card{ position:static; width:auto; }
}
@media (max-width:720px){
  .hero::after{ background:linear-gradient(180deg,rgba(11,20,35,.9) 0%,rgba(11,20,35,.74) 58%,rgba(11,20,35,.52) 100%); }
  .services,.process,.work-grid,.about__boxes{ grid-template-columns:1fr; }
  .head-row{ flex-direction:column; align-items:flex-start; }
  .hero__inner{ padding-top:150px; }

  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
  .rating-badge{ right:10px; bottom:10px; padding:12px 14px; }
}