/* ==========================================================================
   Arco Gold — Option E
   Structure, palette and motion modelled on the Konstruk construction template:
   amber on near-black, Playfair display headings, diagonal photo cuts,
   label-bar cards, angled counter plates.
   ========================================================================== */

:root{
  --amber:      #ffb703;
  --amber-dark: #e8a300;
  --ink:        #010d14;
  --ink-2:      #333333;
  --body:       #5f6672;
  --mist:       #f0f1f3;
  --line:       #e3e5e9;
  --white:      #ffffff;

  --wrap: 1300px;
  --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: 850ms;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--white); color:var(--body);
  font-family:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:'Playfair Display',Georgia,serif; color:var(--ink); font-weight:700; line-height:1.18; margin:0 0 .5em; }
h1{ font-size:clamp(2.5rem,4.8vw,3.9rem); }
h2{ font-size:clamp(1.9rem,3.2vw,2.85rem); }
h3{ font-size:1.18rem; }
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(--amber); outline-offset:3px; }

.wrap{ width:min(100% - 40px,var(--wrap)); margin-inline:auto; }
.sp{ padding:clamp(64px,7.5vw,104px) 0; }
.mist{ background:var(--mist); }
.lede{ max-width:60ch; }

/* dot-square eyebrow marker */
.eyebrow{
  display:flex; align-items:center; gap:10px; margin:0 0 14px;
  font-size:.8rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
}
.eyebrow::before{
  content:""; width:12px; height:12px; flex:none;
  background:
    linear-gradient(var(--amber),var(--amber)) 0 0/4px 4px no-repeat,
    linear-gradient(var(--amber),var(--amber)) 8px 0/4px 4px no-repeat,
    linear-gradient(var(--amber),var(--amber)) 0 8px/4px 4px no-repeat,
    linear-gradient(var(--amber),var(--amber)) 8px 8px/4px 4px no-repeat;
}
.eyebrow.center{ justify-content:center; }
.head-center{ text-align:center; max-width:640px; margin:0 auto 46px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; min-height:54px; padding:0 30px;
  border:0; cursor:pointer; font:inherit; font-weight:700; font-size:.86rem;
  letter-spacing:.1em; text-transform:uppercase; background:var(--amber); color:var(--ink);
  transition:background-color var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease-soft);
}
.btn:hover{ background:var(--ink); color:var(--white); }
.btn:active{ transform:translateY(1.5px); }
.btn--dark{ background:var(--ink); color:var(--white); }
.btn--dark:hover{ background:var(--amber); color:var(--ink); }

/* ---------- top bar ---------- */
.topbar{ background:var(--ink); color:#c3c9d2; font-size:.85rem; }
.topbar .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 26px; min-height:44px; }
.topbar a:hover{ color:var(--amber); }
.topbar i{ color:var(--amber); font-style:normal; margin-right:7px; }
.topbar .end{ margin-left:auto; }

/* ---------- header ---------- */
.site-header{ background:var(--white); position:sticky; top:0; z-index:60; box-shadow:0 1px 0 var(--line); }
.site-header .wrap{ display:flex; align-items:center; gap:26px; min-height:86px; }
.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
.brand__mark{ width:42px; height:42px; flex:none; background:var(--amber); display:grid; place-items:center; }
.brand__mark svg{ width:22px; height:22px; display:block; }
.brand__name{ display:block; font-family:'Playfair Display',serif; font-weight:700; font-size:1.3rem; color:var(--ink); line-height:1.1; letter-spacing:.01em; }
.brand__sub{ display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--body); }
.nav{ display:flex; gap:30px; font-weight:500; color:var(--ink); font-size:.98rem; }
.nav a{ position:relative; padding:8px 0; }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; background:var(--amber); 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; background:var(--mist); color:var(--ink); font-size:1.3rem; cursor:pointer; }
.mobile-nav{ display:none; border-top:1px solid var(--line); padding:4px 0 18px; }
.mobile-nav.is-open{ display:block; }
.mobile-nav a{ display:block; padding:13px 0; border-bottom:1px solid var(--line); font-weight:500; color:var(--ink); }
.mobile-nav .btn{ width:100%; justify-content:center; margin-top:16px; }

/* ---------- hero ---------- */
.hero{ position:relative; background:var(--mist); overflow:hidden; }
.hero__inner{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; }
.hero__copy{ padding:clamp(60px,7vw,110px) 0; max-width:600px; }
.hero__copy p{ font-size:1.05rem; max-width:46ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.hero__media{ position:relative; align-self:stretch; min-height:460px; }
.hero__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  clip-path:polygon(16% 0,100% 0,100% 100%,0 100%);
}
.hero__corner{
  position:absolute; top:0; right:0; width:190px; height:120px; background:var(--amber);
  clip-path:polygon(38% 0,100% 0,100% 100%);
  z-index:2;
}
.hero__badge{
  position:absolute; left:-46px; bottom:52px; z-index:3; background:var(--ink); color:var(--white);
  padding:22px 26px; max-width:260px;
}
.hero__badge b{ display:block; font-family:'Playfair Display',serif; font-size:1.9rem; color:var(--amber); line-height:1; margin-bottom:6px; }
.hero__badge span{ font-size:.92rem; color:#c3c9d2; }

/* ---------- about ---------- */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,68px); align-items:center; }
.about__media{ position:relative; }
.about__media img{ clip-path:polygon(0 0,100% 0,100% 86%,86% 100%,0 100%); }
.about__rules{ position:absolute; left:-14px; top:-14px; width:110px; height:110px; z-index:-1;
  background:repeating-linear-gradient(-45deg,var(--amber) 0 2px,transparent 2px 9px); }
.checklist li{ display:flex; gap:12px; align-items:flex-start; padding:9px 0; }
.checklist svg{ width:20px; height:20px; flex:none; margin-top:4px; stroke:var(--amber); }
.checklist b{ color:var(--ink); font-weight:500; }

/* ---------- services ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.card{ background:var(--white); box-shadow:0 18px 40px -30px rgba(1,13,20,.5); }
.card__shot{ overflow:hidden; aspect-ratio:16/11; }
.card__shot img{ width:100%; height:100%; object-fit:cover; transition:transform 800ms var(--ease-out); }
.card:hover .card__shot img{ transform:scale(1.06); }
.card__bar{ display:flex; align-items:stretch; justify-content:space-between; gap:14px; }
.card__bar > div{ padding:18px 20px; }
.card__bar h3{ margin:0; font-size:1.08rem; }
.card__bar span{ font-size:.88rem; }
.card__tag{
  width:58px; flex:none; background:var(--amber); display:grid; place-items:center;
  transition:background-color var(--dur-fast) var(--ease-soft);
}
.card__tag svg{ width:22px; height:22px; display:block; stroke:var(--ink); transition:transform var(--dur-fast) var(--ease-soft); }
.card:hover .card__tag{ background:var(--ink); }
.card:hover .card__tag svg{ stroke:var(--amber); transform:translateX(3px); }
.card p{ margin:0 0 0; font-size:.95rem; }
.card__body{ padding:0 20px 20px; }

/* ---------- counters ---------- */
.counters{ position:relative; overflow:hidden; background:var(--ink); color:var(--white); }
.counters__bg{ position:absolute; inset:0; }
.counters__bg img{ width:100%; height:100%; object-fit:cover; opacity:.32; }
.counters::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(1,13,20,.94),rgba(1,13,20,.72)); }
.counters .wrap{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1.15fr; gap:44px; align-items:center; }
.counters h2{ color:var(--white); }
.counters .eyebrow{ color:var(--white); }
.counters p{ color:#c3c9d2; }
.plates{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.plate{
  background:rgba(255,183,3,.14); border:1px solid rgba(255,183,3,.4); padding:26px 24px;
  clip-path:polygon(0 0,100% 0,100% 74%,90% 100%,0 100%);
}
.plate b{ display:block; font-family:'Playfair Display',serif; font-size:clamp(1.9rem,3vw,2.5rem); color:var(--amber); line-height:1; }
.plate span{ font-size:.92rem; color:#dfe3e9; }

/* ---------- benefits ---------- */
.benefit{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center; }
/* benefit accordion — the amber bar is the open item, ink bars are collapsed */
.acc__item{ margin-bottom:14px; }
.acc__h{ margin:0; font-family:'Roboto',sans-serif; font-size:1rem; font-weight:500; }
.acc__btn{
  width:100%; display:flex; align-items:center; gap:12px; padding:16px 20px;
  border:0; cursor:pointer; font:inherit; text-align:left;
  background:var(--ink); color:var(--white);
  transition:background-color var(--dur-fast) var(--ease-soft),color var(--dur-fast) var(--ease-soft);
}
.acc__btn:hover{ background:#0b1a24; }
.acc__btn i{ font-style:normal; color:var(--amber); }
.acc__item.is-open .acc__btn{ background:var(--amber); color:var(--ink); }
.acc__item.is-open .acc__btn:hover{ background:var(--amber-dark); }
.acc__item.is-open .acc__btn i{ color:var(--ink); }
.acc__chev{
  margin-left:auto; flex:none; width:9px; height:9px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--dur-fast) var(--ease-soft);
}
.acc__item.is-open .acc__chev{ transform:rotate(225deg) translate(-2px,-2px); }
.acc__panel{
  display:grid; grid-template-rows:0fr; background:var(--mist);
  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:18px 20px 20px; font-size:.97rem; color:var(--ink-2); }
.benefit__media img{ clip-path:polygon(0 0,100% 0,100% 100%,12% 100%); }

/* ---------- projects ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:38px; }
.filters button{
  min-height:46px; padding:0 22px; border:1px solid var(--line); background:var(--white);
  font:inherit; font-size:.82rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); cursor:pointer; transition:background-color var(--dur-fast) var(--ease-soft),border-color var(--dur-fast) var(--ease-soft);
}
.filters button:hover{ border-color:var(--amber); }
.filters button.is-active{ background:var(--amber); border-color:var(--amber); }
.card.is-hidden{ display:none; }
.card.is-filtering{ animation:pop 420ms var(--ease-out) both; }
@keyframes pop{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }

/* ---------- testimonials ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.quote{ background:var(--white); padding:32px 30px; border-bottom:4px solid var(--amber); display:flex; flex-direction:column; gap:16px; }
.quote__stars{ color:var(--amber); letter-spacing:3px; }
.quote p{ margin:0; color:var(--ink-2); }
.quote footer{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); display:flex; align-items:center; gap:12px; }
.quote__avatar{ width:46px; height:46px; flex:none; background:var(--amber); display:grid; place-items:center; font-weight:700; color:var(--ink); }
.quote footer b{ display:block; color:var(--ink); font-weight:500; }
.quote footer span{ font-size:.88rem; }

/* ---------- contact ---------- */
.contact{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px,4vw,52px); align-items:start; }
.row{ display:flex; flex-wrap:wrap; gap:18px; }
.field{ flex:1 1 210px; margin-bottom:18px; }
.field label{ display:block; font-size:.86rem; font-weight:500; color:var(--ink); margin-bottom:7px; }
.field input,.field select,.field textarea{
  width:100%; min-height:54px; padding:13px 16px; font:inherit; font-size:.98rem; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:0;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(255,183,3,.22); }
.info-card{ display:flex; gap:16px; background:var(--white); border:1px solid var(--line); padding:22px; margin-bottom:18px; }
.info-card__icon{ width:52px; height:52px; flex:none; background:rgba(255,183,3,.16); display:grid; place-items:center; }
.info-card__icon svg{ width:23px; height:23px; display:block; stroke:var(--amber-dark); }
.info-card h3{ font-size:1.02rem; margin:0 0 4px; }
.info-card p{ margin:0; font-size:.95rem; }
.info-card a:hover{ color:var(--amber-dark); }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:#aab2bd; padding:clamp(52px,6vw,78px) 0 26px; }
.site-footer h4{ color:var(--white); font-family:'Playfair Display',serif; font-size:1.12rem; margin:0 0 16px; }
.site-footer a:hover{ color:var(--amber); }
.site-footer li{ padding:5px 0; font-size:.96rem; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:38px; }
.site-footer .brand__name{ color:var(--white); }
.site-footer .brand__sub{ color:#7f8894; }
.colophon{ margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:10px 26px; font-size:.88rem; color:#7f8894; }
.colophon .end{ margin-left:auto; }

/* ---------- scroll animation ---------- */
.anim-ready [data-anim]{ opacity:0; }
.anim-ready [data-anim="up"]{ transform:translateY(32px); }
.anim-ready [data-anim="right"]{ transform:translateX(-34px); }
.anim-ready [data-anim="left"]{ transform:translateX(34px); }
.anim-ready [data-anim="zoom"]{ transform:scale(.95); }
[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-duration:.001ms !important; transition-duration:.001ms !important; }
  [data-anim]{ opacity:1 !important; transform:none !important; }
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav,.header-cta{ display:none; }
  .nav-toggle{ display:block; }
  .hero__inner,.about,.benefit,.counters .wrap,.contact{ grid-template-columns:1fr; }
  .hero__media{ min-height:380px; }
  .hero__media img{ clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }
  .hero__badge{ left:auto; right:20px; bottom:20px; }
  .cards,.quotes{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about__media{ order:-1; }
  .benefit__media img{ clip-path:none; }
}
@media (max-width:720px){
  .cards,.quotes,.plates{ grid-template-columns:1fr; }
  .topbar .end{ margin-left:0; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero__badge{ position:static; max-width:none; margin:0; }
  .about__media img,.benefit__media img{ clip-path:none; }
}
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }