/* ==========================================================================
   Arco Gold — Option F
   Structure modelled on the Phinney Ridge Painting site: roundel badge header,
   full-bleed hero, value marquee, bento services, star slider, FAQ, image
   marquee CTA. Their red accent is replaced with gold throughout.
   ========================================================================== */

:root{
  --gold:      #c9a227;
  --gold-deep: #a67f12;
  --gold-wash: #f3e7c6;
  --ink:       #1d2831;
  --ink-2:     #4e575e;
  --slate:     #758696;
  --cream:     #f7f4ee;
  --cream-2:   #efeae0;
  --white:     #ffffff;
  --line:      #ddd8cd;

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

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--cream); color:var(--ink-2);
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:'Newsreader',Georgia,serif; color:var(--ink); font-weight:500; line-height:1.12; margin:0 0 .5em; letter-spacing:-.015em; }
h1{ font-size:clamp(2.7rem,6vw,5rem); }
h2{ font-size:clamp(2rem,3.6vw,3.2rem); }
h3{ font-size:1.35rem; }
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(--gold-deep); outline-offset:3px; }

.wrap{ width:min(100% - 44px,var(--wrap)); margin-inline:auto; }
.sp{ padding:clamp(70px,8vw,120px) 0; }
.cream2{ background:var(--cream-2); }
.ink-bg{ background:var(--ink); color:#cdd5db; }
.ink-bg h2,.ink-bg h3{ color:var(--white); }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 16px;
  font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep);
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.ink-bg .eyebrow{ color:var(--gold); }
.lede{ max-width:56ch; font-size:1.08rem; }
.section-head{ max-width:760px; margin-bottom:56px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; min-height:56px; padding:0 30px;
  border:0; border-radius:2px; cursor:pointer; font:inherit; font-weight:700; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; background:var(--gold); color:var(--ink);
  transition:background-color var(--dur-fast) var(--ease-soft),color var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease-soft);
}
.btn:hover{ background:var(--gold-deep); color:var(--white); }
.btn:active{ transform:translateY(1.5px); }
.btn--ink{ background:var(--ink); color:var(--white); }
.btn--ink:hover{ background:var(--gold); color:var(--ink); }
.btn--line{ background:transparent; color:var(--white); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6); }
.btn--line:hover{ background:var(--white); color:var(--ink); }
.link-more{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.86rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  border-bottom:2px solid var(--gold); padding-bottom:3px;
}
.link-more i{ font-style:normal; transition:transform var(--dur-fast) var(--ease-soft); }
.link-more:hover i{ transform:translateX(4px); }

/* ---------- header ---------- */
.site-header{ position:absolute; top:0; left:0; right:0; z-index:60; }
.site-header.is-stuck{ position:fixed; background:var(--cream); box-shadow:0 1px 0 var(--line); }
.site-header .wrap{ display:flex; align-items:center; gap:26px; min-height:88px; }
.roundel{
  width:80px; height:80px; flex:none; border-radius:50%; background:var(--ink); color:var(--white);
  display:grid; place-items:center; text-align:center; margin-right:auto;
  box-shadow:0 0 0 3px var(--gold) inset; transition:width var(--dur-fast) var(--ease-soft),height var(--dur-fast) var(--ease-soft);
}
.is-stuck .roundel{ width:64px; height:64px; }
.roundel span{ display:block; font-family:'Newsreader',serif; font-size:1.06rem; line-height:1.02; letter-spacing:.01em; }
.roundel small{ display:block; font-family:'Figtree',sans-serif; font-size:.5rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-top:4px; }
.is-stuck .roundel span{ font-size:.9rem; }
.nav{ display:flex; gap:32px; font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.site-header .nav a{ color:var(--white); position:relative; padding:6px 0; }
.site-header.is-stuck .nav a{ color:var(--ink); }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-fast) var(--ease-soft); }
.nav a:hover::after{ transform:scaleX(1); }
.nav-toggle{ display:none; width:48px; height:48px; border:0; border-radius:2px; background:var(--gold); color:var(--ink); font-size:1.3rem; cursor:pointer; }
.mobile-nav{ display:none; background:var(--cream); border-top:1px solid var(--line); padding:6px 22px 20px; }
.mobile-nav.is-open{ display:block; }
.mobile-nav a{ display:block; padding:14px 0; border-bottom:1px solid var(--line); font-weight:600; color:var(--ink); }
.mobile-nav .btn{ width:100%; justify-content:center; margin-top:16px; }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:clamp(620px,92vh,900px); display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); }
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,22,28,.62) 0%,rgba(15,22,28,.25) 34%,rgba(15,22,28,.86) 100%); }
.hero .wrap{ position:relative; z-index:2; padding-bottom:clamp(56px,7vw,92px); }
.hero h1{ color:var(--white); max-width:16ch; }
.hero p{ color:#dbe2e7; max-width:48ch; font-size:1.1rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.hero__award{
  position:absolute; right:0; bottom:clamp(56px,7vw,92px); z-index:3; text-align:center;
  background:rgba(247,244,238,.94); color:var(--ink); border-radius:50%;
  width:132px; height:132px; display:grid; place-items:center; padding:12px;
}
.hero__award b{ display:block; font-family:'Newsreader',serif; font-size:1.5rem; line-height:1; }
.hero__award span{ display:block; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-top:4px; }
.hero__award .stars{ color:var(--gold-deep); font-size:.8rem; letter-spacing:2px; }

/* ---------- value + marquee ---------- */
.value{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; }
.value__points li{ display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--line); }
.value__points li:last-child{ border-bottom:1px solid var(--line); }
.value__points b{ color:var(--ink); display:block; font-weight:600; }
.value__points span{ font-size:.97rem; }
.value__num{ font-family:'Newsreader',serif; font-size:1.1rem; color:var(--gold-deep); flex:none; width:34px; }

.marquee{ overflow:hidden; padding:26px 0; border-block:1px solid var(--line); background:var(--cream-2); }
.marquee__track{ display:flex; width:max-content; animation:slide 38s linear infinite; }
.marquee__track span{
  display:inline-flex; align-items:center; gap:26px; padding-right:26px; white-space:nowrap;
  font-family:'Newsreader',serif; font-size:clamp(1.4rem,2.4vw,2rem); color:var(--ink);
}
.marquee__track span::after{ content:"◆"; color:var(--gold); font-size:.7em; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ---------- services bento ---------- */
.bento{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.tile{
  position:relative; overflow:hidden; border-radius:3px; min-height:300px; display:flex;
  align-items:flex-end; background:var(--ink); color:var(--white);
}
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease-out); }
.tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,22,28,0) 34%,rgba(15,22,28,.88) 100%); }
.tile:hover img{ transform:scale(1.05); }
.tile__body{ position:relative; z-index:2; padding:26px 26px 24px; }
.tile__body h3{ color:var(--white); margin-bottom:6px; }
.tile__body p{ margin:0; color:#d3dae0; font-size:.96rem; max-width:44ch; }
.tile--wide{ grid-column:span 2; }
.tile--tall{ grid-row:span 2; min-height:0; }

/* ---------- testimonials ---------- */
.slider{ position:relative; }
.slider__viewport{ overflow:hidden; }
.slider__track{ display:flex; transition:transform 620ms var(--ease-out); }
.slide{ flex:0 0 33.3333%; padding-right:24px; }
.card-quote{ background:var(--white); border:1px solid var(--line); border-radius:3px; padding:30px 28px; height:100%; display:flex; flex-direction:column; gap:14px; }
.card-quote .stars{ color:var(--gold); letter-spacing:3px; }
.card-quote p{ margin:0; color:var(--ink-2); }
.card-quote footer{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line); font-weight:600; color:var(--ink); }
.card-quote footer span{ display:block; font-weight:400; font-size:.9rem; color:var(--slate); }
.slider__nav{ display:flex; gap:12px; margin-top:32px; justify-content:center; }
.slider__nav button{
  width:54px; height:54px; border-radius:50%; border:1px solid var(--line); background:var(--white);
  color:var(--ink); font-size:1.1rem; cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-soft),color var(--dur-fast) var(--ease-soft),border-color var(--dur-fast) var(--ease-soft);
}
.slider__nav button:hover{ background:var(--gold); border-color:var(--gold); }

/* ---------- portfolio ---------- */
.portfolio{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
.project{ background:var(--white); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.project__shot{ overflow:hidden; aspect-ratio:16/10; }
.project__shot img{ width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease-out); }
.project:hover .project__shot img{ transform:scale(1.045); }
.project__body{ padding:24px 26px 26px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.project__body h3{ margin:0 0 4px; }
.project__body p{ margin:0; font-size:.95rem; }
.project__body .link-more{ flex:none; }

/* ---------- faq ---------- */
.faq{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,64px); align-items:start; }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{
  width:100%; display:flex; align-items:center; gap:20px; padding:24px 0; border:0; background:none;
  font:inherit; font-family:'Newsreader',serif; font-size:1.24rem; color:var(--ink); text-align:left; cursor:pointer;
}
.acc__btn:hover{ color:var(--gold-deep); }
.acc__icon{
  margin-left:auto; flex:none; width:34px; height:34px; border-radius:50%; background:var(--gold-wash);
  display:grid; place-items:center; position:relative; transition:background-color var(--dur-fast) var(--ease-soft);
}
.acc__icon::before,.acc__icon::after{ content:""; position:absolute; background:var(--ink); }
.acc__icon::before{ width:13px; height:2px; }
.acc__icon::after{ width:2px; height:13px; transition:transform var(--dur-fast) var(--ease-soft); }
.acc__item.is-open .acc__icon{ background:var(--gold); }
.acc__item.is-open .acc__icon::after{ transform:scaleY(0); }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 340ms var(--ease-out); }
.acc__item.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__panel > div{ overflow:hidden; }
.acc__panel p{ margin:0; padding:0 0 24px; max-width:62ch; }

/* ---------- cta + image marquee ---------- */
.cta{ background:var(--ink); color:#cdd5db; overflow:hidden; }
.cta__inner{ display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; padding-bottom:clamp(40px,5vw,64px); }
.cta h2{ color:var(--white); max-width:18ch; }
.cta p{ max-width:52ch; }
.img-marquee{ overflow:hidden; padding-bottom:clamp(56px,7vw,90px); }
.img-marquee__track{ display:flex; gap:20px; width:max-content; animation:slide 46s linear infinite; }
.img-marquee__track img{ width:300px; height:200px; object-fit:cover; border-radius:3px; }
.img-marquee:hover .img-marquee__track{ animation-play-state:paused; }

/* ---------- quote form ---------- */
.quote-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,60px); align-items:start; }
.contact-list li{ padding:14px 0; border-top:1px solid var(--line); display:flex; gap:16px; }
.contact-list li:first-child{ border-top:0; }
.contact-list .lbl{ min-width:78px; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); padding-top:4px; }
.contact-list b{ color:var(--ink); font-weight:600; }
.form{ background:var(--white); border:1px solid var(--line); border-radius:3px; padding:clamp(26px,3vw,40px); }
.row{ display:flex; flex-wrap:wrap; gap:18px; }
.field{ flex:1 1 210px; margin-bottom:18px; }
.field label{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); margin-bottom:8px; }
.field input,.field select,.field textarea{
  width:100%; min-height:54px; padding:13px 15px; font:inherit; font-size:1rem; color:var(--ink);
  background:var(--cream); border:1px solid var(--line); border-radius:2px;
}
.field textarea{ min-height:118px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold-deep); background:var(--white); box-shadow:0 0 0 3px rgba(201,162,39,.22); }
.form__note{ font-size:.88rem; margin:14px 0 0; }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:#a9b3bb; padding:clamp(56px,6vw,84px) 0 26px; }
.site-footer h4{ color:var(--white); font-size:.8rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin:0 0 18px; }
.site-footer a:hover{ color:var(--gold); }
.site-footer li{ padding:6px 0; font-size:.97rem; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:40px; }
.colophon{ margin-top:48px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:10px 26px; font-size:.88rem; color:#7d8894; }
.colophon .end{ margin-left:auto; }

/* ---------- scroll animation ---------- */
.anim-ready [data-anim]{ opacity:0; }
.anim-ready [data-anim="up"]{ transform:translateY(30px); }
.anim-ready [data-anim="right"]{ transform:translateX(-32px); }
.anim-ready [data-anim="left"]{ transform:translateX(32px); }
[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; }

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

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav{ display:none; }
  .nav-toggle{ display:block; }
  .site-header{ position:sticky; top:0; background:var(--cream); box-shadow:0 1px 0 var(--line); }
  .site-header .nav a{ color:var(--ink); }
  .hero{ min-height:0; padding-top:60px; }
  .value,.faq,.quote-grid,.cta__inner{ grid-template-columns:1fr; }
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tile--wide{ grid-column:span 2; }
  .tile--tall{ grid-row:auto; min-height:300px; }
  .slide{ flex-basis:50%; }
  .hero__award{ width:112px; height:112px; }
}
@media (max-width:720px){
  .site-header .wrap > .btn{ display:none; }   /* the menu already carries the CTA */
  .bento,.portfolio{ grid-template-columns:1fr; }
  .tile--wide{ grid-column:auto; }
  .slide{ flex-basis:100%; padding-right:0; }
  .hero__award{ position:static; margin:0 0 22px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .project__body{ flex-direction:column; gap:14px; }
}
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }