/* ============================================================
   Awards & Engraving — Libertyville, IL (since 1949)
   Deep navy + champagne gold + serif (Zodiak). Beige accent
   bands. Dramatic, premium, alive.
   ============================================================ */
:root{
  color-scheme:only dark;
  --navy:#132038; --navy-2:#182946; --navy-3:#1e3252; --navy-deep:#0d1729; --navy-glass:rgba(15,24,44,.86);
  --cream:#f0e7d3; --cream-2:#e9dcc0; --cream-3:#e2d3b2;
  --gold:#d3b878; --gold-2:#e6d29b; --gold-deep:#b08e4e; --gold-soft:rgba(211,184,120,.4); --divider:rgba(211,184,120,.6);
  --ink:#1a2740; --ink-soft:rgba(240,231,211,.7); --ink-mute:rgba(240,231,211,.45);
  --cream-ink:#223049; --cream-ink-soft:rgba(34,48,73,.72); --cream-ink-mute:rgba(34,48,73,.5);
  --line:rgba(240,231,211,.12); --line-strong:rgba(240,231,211,.24);
  --ease:cubic-bezier(.22,1,.36,1);
  --serif:"Zodiak","Georgia",serif;
  --sans:"General Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --navpad:96px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#132038;overflow-x:hidden}
body{font-family:var(--sans);background:#132038;color:var(--cream);line-height:1.55;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;padding-top:var(--navpad)}
::selection{background:var(--gold);color:var(--navy)}
img{max-width:100%;display:block}
section[id],[id]{scroll-margin-top:110px}

/* ---------- atmosphere (GPU-promoted, no blend-mode → smooth scroll) ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;transform:translateZ(0)}
.bg .wash{position:absolute;inset:0;background:
  radial-gradient(52% 42% at 84% -8%, rgba(211,184,120,.15), transparent 66%),
  radial-gradient(46% 44% at 6% 14%, rgba(211,184,120,.06), transparent 70%),
  radial-gradient(70% 55% at 50% 118%, rgba(211,184,120,.07), transparent 68%)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;transform:translateZ(0);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- shell + gold dividers ---------- */
.wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 34px}
.grule{height:0;border:0;border-top:1px solid var(--gold-soft)}

/* ---------- preloader ---------- */
.preloader{position:fixed;inset:0;z-index:9999;background:var(--navy);display:grid;place-items:center;
  transition:opacity .55s var(--ease),visibility .55s}
.preloader.done{opacity:0;visibility:hidden}
.pre-logo{position:relative;width:118px;height:118px;display:grid;place-items:center}
/* Ring on the wrapper, same reason as .brand::before — border-radius on the <img>
   clips the art to a disc inscribed in its own content box. */
.pre-logo::before{content:"";position:absolute;left:50%;top:50%;width:66px;height:66px;
  transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--gold-soft);pointer-events:none}
.pre-logo img{width:66px;height:66px;object-fit:contain;padding:12px}
.pre-ring{position:absolute;inset:0;width:118px;height:118px;animation:preSpin .95s linear infinite}
.pre-ring circle{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:60 250}
@keyframes preSpin{to{transform:rotate(360deg)}}

/* ---------- floating rounded nav ---------- */
.nav-float{position:fixed;top:16px;left:0;right:0;z-index:200;display:flex;justify-content:center;
  padding:0 20px;pointer-events:none;opacity:0;animation:fadeDown .8s var(--ease) .15s forwards}
@keyframes fadeDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.nav-float nav{pointer-events:auto;width:min(1160px,100%);display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:var(--navy-glass);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border:1px solid var(--gold-soft);border-radius:100px;padding:9px 12px 9px 18px;
  box-shadow:0 14px 40px rgba(0,0,0,.4);transition:padding .3s var(--ease),background .3s,box-shadow .3s,border-color .3s}
.nav-float.scrolled nav{padding-top:7px;padding-bottom:7px;background:rgba(11,19,36,.95);border-color:rgba(211,184,120,.55)}
.brand{position:relative;display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
/* The ring is drawn here, not on the <img>. border-radius on a replaced element clips
   its content to the *content box's* corner radius, which is
   (border-radius - border-width - padding) — so padding shrinks the clip circle just
   as fast as it insets the art, and the monogram's bottom-right serif was sheared off
   at every padding value. Ring on the parent, image unclipped. */
.brand::before{content:"";position:absolute;left:0;top:50%;width:42px;height:42px;margin-top:-21px;
  border-radius:50%;border:1px solid var(--gold-soft);pointer-events:none}
/* No border-radius/border here — see .brand::before. Padding only insets the art so it
   sits inside that ring; nothing clips it. */
.brand-logo{width:42px;height:42px;flex:0 0 auto;object-fit:contain;padding:8px}
.brand .btext{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--cream);line-height:1}
.brand .btext small{display:block;font-family:var(--sans);font-weight:600;font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin-top:4px}
.nav-links{display:flex;align-items:center;gap:24px;list-style:none;margin:0 auto}
.nav-links a{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cream);text-decoration:none;padding:4px 0;position:relative;transition:color .25s;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1.5px;background:var(--gold);transition:right .3s var(--ease)}
.nav-links a:hover{color:var(--gold)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
.nav-links a[aria-current="page"]{color:var(--gold)}
.nav-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--navy);
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:12px 22px;border-radius:100px;text-decoration:none;border:1px solid var(--gold);
  transition:background .25s,transform .25s var(--ease),box-shadow .25s}
.nav-cta:hover{background:var(--gold-2);transform:translateY(-1px);box-shadow:0 8px 22px rgba(211,184,120,.34)}
.nav-cta span{transition:transform .25s var(--ease)}.nav-cta:hover span{transform:translateX(3px)}
.nav-burger{flex:0 0 auto;width:40px;height:40px;padding:0;border:none;background:transparent;cursor:pointer;position:relative;z-index:2}
.nav-burger span{position:absolute;left:9px;right:9px;height:2px;border-radius:2px;background:var(--gold);transition:transform .38s var(--ease)}
.nav-burger span:nth-child(1){top:14px}.nav-burger span:nth-child(2){bottom:14px}
body.nav-open .nav-burger span:nth-child(1){top:calc(50% - 1px);transform:rotate(45deg)}
body.nav-open .nav-burger span:nth-child(2){bottom:calc(50% - 1px);transform:rotate(-45deg)}

/* ---------- buttons (rounded) ---------- */
.btn{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:15px 30px;border-radius:100px;text-decoration:none;cursor:pointer;border:1px solid transparent;
  display:inline-flex;align-items:center;gap:10px;transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .3s}
.btn .arrow{transition:transform .3s var(--ease)}.btn:hover .arrow{transform:translateX(4px)}
.btn-gold{background:var(--gold);color:var(--navy);border-color:var(--gold);box-shadow:0 10px 28px rgba(211,184,120,.22)}
.btn-gold:hover{transform:translateY(-2px);background:var(--gold-2);box-shadow:0 16px 38px rgba(211,184,120,.34)}
/* Secondary CTAs sit beside a gold primary, so they stay outline rather than filled —
   but they carry the same gold as "Get a quote" instead of cream, so every call to
   action on the site reads as one colour. */
.btn-line{background:transparent;color:var(--gold);border-color:var(--gold)}
.btn-line:hover{transform:translateY(-2px);border-color:var(--gold);color:var(--navy);background:var(--gold)}

/* ---------- type ---------- */
.kicker{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.kicker .diamond{color:var(--gold);font-size:.6em;transform:translateY(-.1em)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.eyebrow .eb-ic{width:19px;height:19px;flex:0 0 auto;color:var(--gold)}
.sec-title{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;color:var(--cream);
  font-size:clamp(34px,5.2vw,62px);line-height:1.03;margin:0 0 20px}
.sec-title em{font-style:italic;color:var(--gold)}
.sec-sub{color:var(--ink-soft);font-size:clamp(15px,1.7vw,18px);max-width:56ch;line-height:1.7}
.hl{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-soft);transition:border-color .2s}
.hl:hover{border-color:var(--gold)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* ---------- hero fits viewport ---------- */
/* Cancel body's padding-top so the hero starts at the very top of the viewport and the
   photograph runs behind the floating nav. Without this the pill sits on a flat navy
   strip with a hard seam where the photo begins. The nav is a backdrop-blur glass pill,
   so it reads cleanly over the image. Net height is unchanged (was 100svh - navpad
   starting below the nav), so nothing downstream shifts. */
.hero-wrap{position:relative;z-index:2;margin-top:calc(-1 * var(--navpad));min-height:100svh;display:flex;flex-direction:column;overflow:hidden}

/* Full-bleed hero photograph. It lives inside header.hero rather than .hero-wrap so it
   stops at the trust bar — spanning the whole wrap meant the bar's solid background
   sliced through the bottom of the monogram. The scrim is angled rather than flat so
   the mark stays legible on the right while the headline keeps contrast on the left. */
.hero-photo{position:absolute;inset:0;z-index:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(19,32,56,.96) 0%,rgba(19,32,56,.92) 30%,rgba(19,32,56,.7) 52%,rgba(19,32,56,.4) 74%,rgba(19,32,56,.34) 100%)}
.hero-wrap .trust{position:relative;z-index:1}

/* Top padding replaces the body offset the hero just cancelled, keeping the headline
   clear of the nav while the photo behind it still reaches y=0. */
header.hero{position:relative;overflow:hidden;flex:1 1 auto;display:flex;align-items:center;padding:calc(var(--navpad) + 24px) 0 30px}
header.hero .wrap{position:relative;z-index:1;width:100%}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"kick" "title" "rest";align-items:start;width:100%;max-width:min(760px,64%)}
.hero-grid>*{min-width:0}
.hero-kick{grid-area:kick}
.hero-h1{grid-area:title}
.hero-rest{grid-area:rest}
.hero-kick{margin-bottom:18px;opacity:0;animation:fadeUp .7s var(--ease) .5s forwards}
h1.hero-h1{font-family:var(--serif);font-weight:700;color:var(--cream);line-height:.98;letter-spacing:-.015em;font-size:clamp(40px,6vw,82px)}
h1.hero-h1 .amp{font-style:italic;color:var(--gold);font-weight:400}
h1.hero-h1 .sm{display:block;font-size:clamp(16px,1.8vw,22px);font-weight:500;font-style:italic;color:var(--gold);letter-spacing:0;margin-top:.4em;line-height:1.3}
.hero-h1 .l{display:block;overflow:hidden;padding-bottom:.2em}
.hero-h1 .l1{margin-bottom:-.16em}
.hero-h1 .l>span{display:block;transform:translateY(112%);animation:rise 1s var(--ease) forwards}
.hero-h1 .l1>span{animation-delay:.85s}.hero-h1 .l2>span{animation-delay:.98s}
@keyframes rise{to{transform:none}}
.hero-sub{margin:22px 0 20px;color:rgba(240,231,211,.9);font-size:clamp(16px,1.7vw,18px);max-width:46ch;line-height:1.7;letter-spacing:.004em;opacity:0;animation:fadeUp .8s var(--ease) 1.4s forwards}
.hero-tag{margin-bottom:24px;opacity:0;animation:fadeUp .8s var(--ease) 1.5s forwards}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:fadeUp .8s var(--ease) 1.6s forwards}
.hero-media{position:relative;opacity:0;animation:fadeUp .9s var(--ease) 1.15s forwards}
.plate{position:relative;padding:12px}
.plate::before,.plate::after,.plate .cc::before,.plate .cc::after{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--gold)}
.plate::before{top:0;left:0;border-right:0;border-bottom:0}
.plate::after{top:0;right:0;border-left:0;border-bottom:0}
.plate .cc::before{bottom:0;left:0;border-right:0;border-top:0}
.plate .cc::after{bottom:0;right:0;border-left:0;border-top:0}
.plate img{width:100%;height:auto;max-height:52svh;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--gold-soft);box-shadow:0 30px 70px rgba(0,0,0,.5)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- trust strip ---------- */
.trust{position:relative;z-index:2;background:var(--navy-deep);color:var(--cream);border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)}
.trust-in{max-width:1180px;margin:0 auto;padding:16px 34px;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.trust-item{padding:4px 30px;border-left:1px solid var(--line-strong);display:flex;flex-direction:column;gap:9px;transition:transform .3s var(--ease)}
.trust-item:first-child{border-left:none;padding-left:0}
.trust-item:hover{transform:translateY(-3px)}
.trust-item .ti-ic{width:25px;height:25px;color:var(--gold)}
.trust-item b{font-family:var(--serif);font-weight:700;font-size:clamp(19px,2.2vw,26px);line-height:1;color:var(--cream)}
.trust-item span{font-size:11.5px;letter-spacing:.03em;color:var(--ink-soft);line-height:1.4}
.trust-item .em{font-style:italic;color:var(--gold)}

/* ---------- section shell ---------- */
.section{padding:74px 0;border-top:1px solid var(--divider)}
/* 680px held roughly 24 characters per line at the 62px display size, so any headline
   past ~48 characters spilled to three or four lines. 980px (of 1112px available in
   .wrap) keeps every title on two lines at the widest breakpoint, where the clamp
   maxes the type out at 62px. .sec-sub stays capped at 56ch, so body copy below is
   unaffected by the wider heading measure. */
.sec-head{max-width:980px;margin:0 0 12px}

/* ---------- products ---------- */
.svc-list{margin-top:40px;border-top:1px solid var(--line-strong)}
.svc-item{display:grid;grid-template-columns:64px 1fr 340px;gap:clamp(20px,3vw,46px);align-items:center;padding:30px 0;border-bottom:1px solid var(--line-strong);position:relative}
.svc-item:nth-child(even){grid-template-columns:340px 1fr 64px}
.svc-item:nth-child(even) .svc-media{order:1}.svc-item:nth-child(even) .svc-txt{order:2}.svc-item:nth-child(even) .svc-num{order:3;text-align:right}
.svc-num{font-family:var(--serif);font-weight:400;font-size:28px;color:var(--gold)}
.svc-txt h3{font-family:var(--serif);font-weight:700;font-size:clamp(24px,3vw,37px);color:var(--cream);line-height:1.05;margin-bottom:10px}
.svc-txt h3 em{font-style:italic;color:var(--gold)}
.svc-txt p{color:var(--ink-soft);font-size:15px;line-height:1.65;max-width:52ch}
/* Read as an inline text link, not a button. The old uppercase + letterspaced label
   sitting on a full-width bottom border looked like a button someone forgot to
   finish, so: sentence case, normal tracking, and a real underline set off the
   baseline rather than a box edge. */
.svc-txt .more{display:inline-block;margin-top:14px;font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--gold);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(211,184,120,.5);
  transition:text-decoration-color .25s var(--ease),color .25s var(--ease)}
.svc-txt .more:hover,.svc-item:hover .svc-txt .more{text-decoration-color:var(--gold)}
.svc-txt .more:hover{color:var(--gold-2)}
.svc-media{position:relative;overflow:hidden;border-radius:6px}
.svc-media img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--gold-soft);border-radius:6px;transition:transform .6s var(--ease)}
.svc-item:hover .svc-media img{transform:scale(1.05)}
.svc-media::before,.svc-media::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--gold);z-index:2}
.svc-media::before{top:9px;left:9px;border-right:0;border-bottom:0}
.svc-media::after{bottom:9px;right:9px;border-left:0;border-top:0}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gal figure{position:relative;overflow:hidden;border:1px solid var(--gold-soft);border-radius:6px;aspect-ratio:4/5;margin:0;background:var(--navy-2)}
.gal figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gal figure:hover img{transform:scale(1.05)}
.gal figure figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 14px;background:linear-gradient(transparent,rgba(13,23,41,.92));color:var(--cream);font-family:var(--sans);font-size:11.5px;letter-spacing:.04em;line-height:1.35;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ease)}
.gal figure figcaption b{font-family:var(--serif);font-weight:700;font-size:15px;display:block;color:var(--gold)}
.gal figure:hover figcaption{opacity:1;transform:none}

/* Shop gallery (our-shop.html) — two up, landscape. The default .gal is a
   4-up 4:5 portrait grid built for product shots; shop photos are wide.
   .gal.shop-gal outranks the plain .gal rules in the media queries below
   on specificity, so the only breakpoint it needs is its own. */
.gal.shop-gal{grid-template-columns:repeat(2,1fr)}
.gal.shop-gal figure{aspect-ratio:3/2}

/* Mosaic variant — same column flow as the review wall (.testi-wall). Dropping the
   forced 4/5 aspect is what makes it a mosaic: each photo keeps its own proportions,
   so the tall ones stagger against the wide ones instead of every tile matching.
   display:block is needed to leave grid, which also makes the grid-template-columns
   in the media queries below inert for this variant. */
.gal.mosaic{display:block;columns:3;column-gap:16px}
.gal.mosaic figure{aspect-ratio:auto;margin:0 0 16px;break-inside:avoid;-webkit-column-break-inside:avoid}
.gal.mosaic figure img{height:auto;display:block}
@media (max-width:900px){.gal.mosaic{columns:2}}
@media (max-width:600px){
  .gal.mosaic{columns:2;column-gap:9px}
  .gal.mosaic figure{margin-bottom:9px}
  .gal.mosaic figure figcaption{padding:18px 9px 8px;font-size:11px;opacity:1;transform:none}
  .gal.mosaic figure figcaption b{font-size:12px}
}
@media (max-width:380px){ .gal.mosaic{columns:1} }
@media(max-width:760px){
  .gal.shop-gal{grid-template-columns:repeat(2,1fr);gap:10px}
  .gal.shop-gal figure figcaption{padding:16px 9px 8px;font-size:10.5px;opacity:1;transform:none}
  .gal.shop-gal figure figcaption b{font-size:11.5px}
}
@media(max-width:380px){ .gal.shop-gal{grid-template-columns:1fr} }

/* ---------- beige band + trusted redesign ---------- */
.band{position:relative;z-index:2;background:var(--cream);color:var(--cream-ink);padding:74px 0;overflow:hidden;border-top:1px solid var(--divider)}
.band .eyebrow{color:var(--gold-deep)}.band .eyebrow .eb-ic{color:var(--gold-deep)}
.band .sec-title{color:var(--cream-ink)}.band .sec-title em{color:var(--gold-deep)}
.band .sec-sub{color:var(--cream-ink-soft)}
.band .grule{border-top-color:rgba(176,142,78,.5);margin:30px 0 40px;width:90px}
/* Split head: copy left, circular award photo right. The photo is decorative, so it
   carries empty alt and aria-hidden — the section's meaning is in the text. */
.tb-head{display:grid;grid-template-columns:1.05fr .85fr;gap:clamp(28px,5vw,64px);align-items:center;margin-bottom:44px}
.tb-head-txt .sec-title{margin-bottom:0}
.tb-rule{height:0;border:0;border-top:2px solid var(--gold-deep);width:78px;margin:18px 0 20px;opacity:.65}
.tb-photo{position:relative;justify-self:end;width:100%;max-width:368px;aspect-ratio:1;border-radius:50%;overflow:hidden;
  box-shadow:0 24px 60px rgba(19,32,56,.28);border:1px solid rgba(176,142,78,.5)}
.tb-photo img{width:100%;height:100%;object-fit:cover;display:block}

.tb-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.tb-card{position:relative;flex:1 1 300px;max-width:362px;display:flex;align-items:center;gap:16px;
  border:1px solid rgba(176,142,78,.45);background:rgba(255,255,255,.42);padding:24px 24px 24px 84px;min-height:136px;overflow:hidden;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
/* Curved number panel. border-radius with a slash makes the right edge a quarter
   ellipse rather than a circle, so the sweep stays shallow at any card height.
   Colour alternates navy/gold down the row. */
.tb-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:58px;
  background:var(--navy);border-radius:0 52% 52% 0 / 0 50% 50% 0}
.tb-card:nth-child(even)::before{background:var(--gold-deep)}
.tb-n{position:absolute;left:0;top:0;bottom:0;width:58px;z-index:1;display:grid;place-items:center;
  font-family:var(--serif);font-weight:400;font-size:23px;letter-spacing:.04em;color:rgba(255,255,255,.95)}
/* On the gold panel, navy ink reads far better than white. */
.tb-card:nth-child(even) .tb-n{color:var(--navy)}

.tb-ring{flex:0 0 58px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:rgba(176,142,78,.14);border:1px solid rgba(176,142,78,.4)}
.tb-card .tb-ic{width:27px;height:27px;color:var(--gold-deep)}
.tb-txt{min-width:0}
.tb-card h4{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--cream-ink);line-height:1.1}
.tb-card p{font-size:13.5px;color:var(--cream-ink-soft);margin:5px 0 8px;line-height:1.4}
.tb-card .tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
.tb-card .tag::before{content:"";width:16px;height:1px;background:var(--gold-deep)}
@media (hover:hover){
  .tb-card:hover{border-color:var(--gold-deep);background:rgba(255,255,255,.62);transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(19,32,56,.13)}
}
.tb-foot{display:flex;align-items:center;gap:22px;justify-content:center;margin-top:44px;padding-top:26px;border-top:1px solid rgba(176,142,78,.4);flex-wrap:wrap}
.tb-foot .laurel{flex:0 0 auto;width:66px;height:66px;color:var(--gold-deep)}
.tb-foot p{font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.9vw,20px);color:var(--cream-ink);max-width:62ch}

/* ---------- clients wall (About -> #trusted) ---------------------------
   One card per client, set as an engraved nameplate rather than a logo.
   .client-logo is kept live so dropping a real file in assets/clients/ and
   swapping the span for an <img> is the only change ever needed.
   ---------------------------------------------------------------------- */
.clients-wall{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:44px}
/* Tall card: mark on top, name + sector pinned to the bottom. The mark sits in a
   fixed-height box so every logo shares one baseline regardless of its proportions,
   and margin-top:auto on the caption keeps the text flush to the bottom edge even
   when a name wraps to two lines. */
.client{flex:1 1 196px;max-width:238px;min-width:0;min-height:196px;margin:0;padding:24px 16px 18px;
  display:flex;flex-direction:column;align-items:center;
  border:1px solid rgba(176,142,78,.45);background:#f4eedf;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.cw{display:flex;align-items:center;justify-content:center;
  width:100%;height:76px;flex:0 0 auto;text-align:center;text-wrap:balance;
  font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.18;
  letter-spacing:.085em;text-transform:uppercase;color:var(--cream-ink);
  text-shadow:0 1px 0 rgba(255,255,255,.7);
  transition:color .3s var(--ease)}
.cw.long{font-size:17px;letter-spacing:.065em}
.client-logo{width:100%;height:76px;flex:0 0 auto;object-fit:contain}
/* min-height reserves room for a two-line name (Advocate Condell Medical, U.S. Marine
   Corps) so the divider rule lands at the same height on every card in a row —
   otherwise the wrapped ones ride up and the rules look ragged. */
.client-meta{margin-top:auto;padding-top:16px;min-height:74px;width:100%;text-align:center;
  border-top:1px solid rgba(176,142,78,.3)}
.client-meta b{display:block;font-family:var(--serif);font-weight:700;font-size:15px;
  line-height:1.25;letter-spacing:.005em;color:var(--cream-ink);text-wrap:balance}
.client-meta span{display:block;margin-top:5px;font-family:var(--sans);font-size:9.5px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--cream-ink-soft)}
/* X-Golf only ships a white-on-transparent mark, which disappears on the cream band.
   brightness(0) flattens it to solid ink while keeping the alpha channel, so the
   silhouette reads correctly instead of vanishing. */
.client-logo.on-light{filter:brightness(0);opacity:.82}
/* Round marks (the service seals) are square, so at a fixed height they cover far less
   area than a wide wordmark filling the tile. The negative margin lets them run into
   the tile padding so they carry comparable visual weight. */
.client-logo.mark{height:84px;margin:-7px 0}
@media (hover:hover){
  .client:hover{border-color:var(--gold-deep);background:#f8f3e9;transform:translateY(-3px)}
  .client:hover .cw{color:var(--gold-deep)}
}
.clients-also{max-width:66ch;margin:26px auto 0;text-align:center;
  font-size:13.5px;line-height:1.6;color:var(--cream-ink-soft)}
.clients-also strong{font-weight:600;color:var(--cream-ink)}
@media (max-width:600px){
  .clients-wall{gap:10px;margin-top:34px}
  .client{flex:1 1 150px;min-height:168px;padding:18px 11px 14px}
  .cw{font-size:15px;letter-spacing:.06em;height:64px}
  .cw.long{font-size:13.5px}
  .client-meta{padding-top:12px;min-height:64px}
  .client-meta b{font-size:13.5px}
  .client-meta span{font-size:8.5px;letter-spacing:.11em}
  .client-logo{height:64px}   /* matches .cw height so marks share one baseline */
  .client-logo.mark{height:74px;margin:-5px 0}
}

/* ---------- about ---------- */
.about-compact{padding:62px 0}
.split{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(26px,5vw,64px);align-items:center}
/* Capped lower than .sec-title because this heading sits in the narrow (~480px) column
   of the .split grid, where 50px only fits ~21 characters per line and pushed these to
   three lines. */
.split .txt h2{font-family:var(--serif);font-weight:700;font-size:clamp(30px,3.6vw,42px);color:var(--cream);line-height:1.06;margin-bottom:20px}
.split .txt h2 em{font-style:italic;color:var(--gold)}
.split .txt p{color:var(--ink-soft);font-size:15.5px;line-height:1.8;margin-bottom:14px}
.split .txt p b{color:var(--cream);font-weight:600}
.about-media{position:relative}
.about-media .plate img{aspect-ratio:5/4;max-height:none}
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;border-top:1px solid var(--line-strong)}
.stat-strip .st{padding:20px 18px 4px;border-right:1px solid var(--line-strong)}
.stat-strip .st:first-child{padding-left:0}
.stat-strip .st b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(24px,3.4vw,40px);line-height:1;color:var(--gold)}
/* Direct child only — the number inside <b> is its own <span class="yrs">, and a
   descendant selector here would restyle it as the small uppercase label. */
.stat-strip .st>span{display:block;margin-top:8px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}

/* ---------- instagram ---------- */
.ig-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.ig-card{position:relative;display:block;aspect-ratio:1;overflow:hidden;border:1px solid var(--gold-soft);border-radius:6px;background:var(--navy-2);text-decoration:none;color:var(--cream)}
.ig-card img{width:100%;height:100%;object-fit:cover;opacity:.7;transition:transform .5s var(--ease),opacity .3s}
.ig-card:hover img{transform:scale(1.06);opacity:.5}
.ig-card .play{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.ig-card .play svg{width:42px;height:42px;color:var(--gold);filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.ig-card .tag{position:absolute;left:12px;bottom:12px;z-index:2;font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--cream)}

/* ---------- visit + map ---------- */
.area-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,52px);align-items:center}
.area-list{list-style:none;columns:2;column-gap:30px;margin:24px 0 24px}
.area-list li{font-family:var(--serif);font-size:clamp(19px,2.2vw,27px);line-height:1.5;color:var(--cream);break-inside:avoid;display:flex;align-items:baseline;gap:10px}
.area-list li::before{content:"\2726";color:var(--gold);font-size:.5em;transform:translateY(-.2em)}
.area-list li.em{font-style:italic;color:var(--gold)}
.map-card{position:relative;border:1px solid var(--gold-soft);border-radius:8px;background:var(--navy-2);padding:10px}
.map-card iframe{width:100%;height:330px;border:0;display:block;border-radius:4px;filter:grayscale(.2) contrast(1.04) brightness(.95)}
.map-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 8px 8px;flex-wrap:wrap}
.map-foot .addr{font-size:14px;color:var(--ink-soft);line-height:1.55}
.map-foot .addr b{color:var(--gold);font-weight:700;font-family:var(--serif)}

/* ---------- final CTA ---------- */
.finalcta{position:relative;z-index:2;overflow:hidden;text-align:center;padding:clamp(60px,10vw,108px) 0;border-top:1px solid var(--divider)}
.fc-bg{position:absolute;inset:0;z-index:0}
.fc-bg img{width:100%;height:100%;object-fit:cover;filter:blur(6px) brightness(.34) saturate(.85);transform:scale(1.1)}
.fc-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(13,23,41,.7),rgba(13,23,41,.85))}
.finalcta .wrap{max-width:820px;text-align:center}
.finalcta .eyebrow{justify-content:center}
.finalcta h2{font-family:var(--serif);font-weight:700;color:var(--cream);font-size:clamp(36px,6vw,72px);line-height:1.03;margin-bottom:18px}
.finalcta h2 em{font-style:italic;color:var(--gold)}
.finalcta p{color:rgba(240,231,211,.9);font-size:clamp(16px,1.8vw,19px);line-height:1.7;max-width:52ch;margin:0 auto 32px}
.finalcta .fc-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- contact page ---------- */
.page-hero{padding:20px 0 40px}
.page-hero h1{font-family:var(--serif);font-weight:700;color:var(--cream);font-size:clamp(40px,6vw,80px);line-height:1;margin:14px 0 16px}
.page-hero h1 em{font-style:italic;color:var(--gold)}
.page-hero .sec-sub{max-width:52ch}
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,5vw,60px);align-items:start}
.form-card{background:var(--navy-2);border:1px solid var(--gold-soft);border-radius:14px;padding:clamp(24px,4vw,40px);position:relative}
form{display:grid;gap:15px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
label{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:7px}
input,select,textarea{width:100%;font-family:inherit;font-size:15px;color:var(--cream);background:rgba(240,231,211,.05);border:1px solid var(--line-strong);border-radius:8px;padding:13px 14px;transition:border-color .25s,box-shadow .25s}
input::placeholder,textarea::placeholder{color:var(--ink-mute)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d3b878' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(211,184,120,.16)}
textarea{resize:vertical;min-height:120px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.f-submit{background:var(--gold);color:var(--navy);border:1px solid var(--gold);border-radius:100px;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:16px 28px;width:100%;cursor:pointer;margin-top:4px;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:background .25s,transform .25s var(--ease),box-shadow .25s}
.f-submit:hover{background:var(--gold-2);transform:translateY(-2px);box-shadow:0 12px 30px rgba(211,184,120,.3)}
.f-note{font-size:12px;color:var(--ink-mute);margin-top:2px}
.f-note.demo{color:var(--gold);font-weight:600}
.form-success{display:none;flex-direction:column;gap:12px;text-align:center;padding:20px 0}
.form-success.show{display:flex;animation:fadeUp .5s var(--ease)}
.form-success .chk{width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;font-size:26px;margin:0 auto}
.form-success h3{font-family:var(--serif);font-size:24px;color:var(--cream)}
.form-success p{color:var(--ink-soft);font-size:15px}
.side{display:flex;flex-direction:column}
.side-card{border-top:1px solid var(--line-strong);padding:22px 0 4px;display:flex;gap:14px;align-items:flex-start}
.side-card:first-child{border-top:none;padding-top:0}
.side-card .ic{flex:0 0 22px;width:22px;height:22px;color:var(--gold);margin-top:2px}
.side-card h3{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--cream);margin-bottom:6px}
.side-card p,.side-card address{font-style:normal;font-size:14.5px;color:var(--ink-soft);line-height:1.7}
.side-card a{color:var(--gold);text-decoration:none;font-weight:600;border-bottom:1px solid var(--gold-soft)}
.side-card a:hover{border-color:var(--gold)}

/* ---------- footer ---------- */
footer{position:relative;z-index:2;background:var(--navy-deep);color:var(--cream);border-top:1px solid var(--divider)}
.foot-word{display:block;width:100%;height:auto;padding:44px 0 4px}
.foot-word text{fill:none;stroke:var(--gold);stroke-width:1;font-family:var(--serif);font-weight:700}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:32px;padding:20px 0 34px}
.foot-grid h4{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.foot-brand .brand{margin-bottom:14px}
.foot-brand p{font-size:13.5px;color:var(--ink-soft);line-height:1.7;max-width:32ch}
.foot-social{display:flex;gap:10px;margin-top:18px}
.fsoc{width:40px;height:40px;border-radius:50%;border:1px solid var(--gold-soft);display:grid;place-items:center;color:var(--cream);transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.fsoc svg{width:17px;height:17px}
.fsoc:hover{background:var(--gold);color:var(--navy);border-color:var(--gold);transform:translateY(-2px)}
.foot-grid ul{list-style:none}
.foot-grid ul li{margin-bottom:11px}
.foot-grid ul a{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-soft);text-decoration:none;transition:color .25s}
.foot-grid ul a .fl-ic{width:15px;height:15px;flex:0 0 auto;color:var(--gold);transition:transform .25s var(--ease)}
.foot-grid ul a:hover{color:var(--gold)}
.foot-grid ul a:hover .fl-ic{transform:translateX(2px)}
.foot-contact{display:grid;gap:12px}
.foot-contact .row{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink-soft);line-height:1.5}
.foot-contact .row .ic{flex:0 0 18px;width:18px;height:18px;color:var(--gold);margin-top:2px}
.foot-contact .row a{color:var(--ink-soft);text-decoration:none}.foot-contact .row a:hover{color:var(--gold)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding:20px 0 40px;font-size:12.5px;color:var(--ink-mute)}
.foot-bottom a{color:var(--ink-soft);text-decoration:none}.foot-bottom a:hover{color:var(--gold)}

/* ---------- mobile menu ---------- */
body.nav-open{overflow:hidden}
.nav-menu{position:fixed;inset:0;z-index:190;background:var(--navy-deep);color:var(--cream);display:flex;flex-direction:column;justify-content:flex-start;padding:96px 30px 50px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .42s var(--ease),transform .42s var(--ease),visibility .42s}
body.nav-open .nav-menu{opacity:1;visibility:visible;transform:none}
.nm-inner{position:relative;z-index:1;width:100%;max-width:520px;margin:auto}
.nm-eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.nm-links{display:flex;flex-direction:column}
.nm-links a{display:flex;align-items:baseline;gap:18px;padding:15px 0;text-decoration:none;color:var(--cream);border-bottom:1px solid var(--line-strong);font-family:var(--serif);font-weight:700;line-height:1;font-size:clamp(30px,10vw,46px);opacity:0;transform:translateY(18px)}
body.nav-open .nm-links a{animation:nmRise .55s var(--ease) forwards}
body.nav-open .nm-links a:nth-child(1){animation-delay:.10s}
body.nav-open .nm-links a:nth-child(2){animation-delay:.15s}
body.nav-open .nm-links a:nth-child(3){animation-delay:.20s}
body.nav-open .nm-links a:nth-child(4){animation-delay:.25s}
body.nav-open .nm-links a:nth-child(5){animation-delay:.30s}
body.nav-open .nm-links a:nth-child(6){animation-delay:.35s}
@keyframes nmRise{to{opacity:1;transform:none}}
.nm-links a .nm-n{font-family:var(--serif);font-style:italic;font-weight:400;font-size:15px;color:var(--gold);flex:0 0 auto}
.nm-links a[aria-current="page"] .nm-t{color:var(--gold)}
@media (hover:hover){.nm-links a:hover .nm-t{color:var(--gold)}}
.nm-foot{position:relative;margin-top:28px;padding-top:28px;display:flex;flex-direction:column;gap:16px;opacity:0;transform:translateY(18px)}
body.nav-open .nm-foot{animation:nmRise .55s var(--ease) .42s forwards}
.nm-foot::before{content:"";position:absolute;top:0;left:0;right:0;border-top:1px solid var(--gold-soft)}
.nm-meta{display:flex;flex-direction:column;gap:6px}
.nm-meta a{color:var(--ink-soft);text-decoration:none;font-size:15px}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"kick" "title" "rest";gap:16px;max-width:none}
  /* Portrait viewports crop the wide photo hard horizontally, so bias toward the
     monogram rather than the extended wood. Scrim goes flat and darker instead of
     angled — text spans the full width here, so an angled one leaves it unreadable. */
  .hero-photo img{object-position:72% 45%}
  .hero-photo::after{background:linear-gradient(180deg,rgba(19,32,56,.86) 0%,rgba(19,32,56,.8) 45%,rgba(19,32,56,.9) 100%)}
  .hero-rest .hero-sub{margin-top:0}
  .svc-item,.svc-item:nth-child(even){grid-template-columns:1fr;gap:16px}
  .svc-item:nth-child(even) .svc-num,.svc-item:nth-child(even) .svc-media,.svc-item:nth-child(even) .svc-txt{order:0}
  .svc-media{order:-1;max-width:520px}
  .gal{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:30px}
  .about-media{max-width:520px}
  .area-grid{grid-template-columns:1fr;gap:28px}
  .contact-grid{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:1fr 1fr}
  .stat-strip .st{padding:18px 14px;border-bottom:1px solid var(--line-strong)}
  .ig-row{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:820px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:block}
  .nav-float{top:12px;padding:0 14px}
  .nav-float nav{padding:8px 10px 8px 16px;border-radius:26px}
  .bg .wash{background:none}
}
@media (min-width:821px){.nav-burger,.nav-menu{display:none!important}}
/* Six nav items instead of five (Our Shop) crowd the bar on small laptops.
   Tighten the link row in that band only — the desktop bar above 1060px is
   untouched, and below 821px the burger takes over anyway. */
@media (min-width:821px) and (max-width:1060px){
  .nav-links{gap:14px}
  .nav-links a{font-size:11px;letter-spacing:.04em;white-space:nowrap}
}
@media (max-width:600px){
  :root{--navpad:80px}
  .section{padding:54px 0}
  .about-compact{padding:46px 0}
  .band{padding:54px 0}
  .wrap{padding:0 22px}
  .trust-in{grid-template-columns:1fr 1fr;gap:20px 0;padding:24px 22px}
  .trust-item{padding:0 18px}.trust-item:nth-child(odd){border-left:none;padding-left:0}
  .gal{grid-template-columns:1fr 1fr;gap:12px}
  .f-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .area-list{columns:1}
  .tb-head{grid-template-columns:1fr;gap:26px;margin-bottom:32px}
  .tb-photo{justify-self:center;max-width:300px}
  .tb-card{padding:18px 18px 18px 68px;gap:13px}
  .tb-card::before{width:50px}
  .tb-ring{flex:0 0 46px;width:46px;height:46px}
  .tb-foot{flex-direction:column;text-align:center;gap:14px}
  header.hero{padding:8px 0 20px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-delay:0s!important}
  .reveal{opacity:1;transform:none}.hero-h1 .l>span{transform:none}
  .preloader{display:none}
}

/* ---------- section teaser CTA ---------- */
.sec-cta{display:flex;justify-content:center;margin-top:38px}

/* ---------- process strip ---------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:42px}
.p-step{position:relative;border:1px solid var(--gold-soft);border-radius:10px;padding:26px 22px;background:rgba(240,231,211,.03);transition:transform .3s var(--ease),border-color .3s}
.p-step:hover{transform:translateY(-4px);border-color:var(--gold)}
.p-step .pn{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:15px;color:var(--gold);margin-bottom:14px}
.p-step h3{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--cream);margin-bottom:9px;line-height:1.15}
.p-step p{font-size:13.5px;color:var(--ink-soft);line-height:1.6}

/* ---------- svc meta tags (products page) ---------- */
.svc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.svc-tags span{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-soft);border-radius:100px;padding:6px 13px}

/* ---------- FAQ (details/summary accordion) ---------- */
.faq{margin-top:36px;border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:21px 0;font-family:var(--serif);font-weight:700;font-size:clamp(17px,2.2vw,21px);color:var(--cream);transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary .fx{flex:0 0 30px;width:30px;height:30px;border:1px solid var(--gold-soft);border-radius:50%;display:grid;place-items:center;color:var(--gold);transition:transform .35s var(--ease),background .25s,color .25s,border-color .25s}
.faq summary .fx svg{width:13px;height:13px}
.faq details[open] summary{color:var(--gold)}
.faq details[open] .fx{transform:rotate(45deg);background:var(--gold);color:var(--navy);border-color:var(--gold)}
.faq .fa{padding:0 52px 22px 0;color:var(--ink-soft);font-size:15px;line-height:1.7;max-width:72ch}

/* ---------- testimonials ---------- */
.reviews-rate{display:flex;align-items:center;gap:9px;margin-top:6px;font-size:14px;color:var(--ink-soft);flex-wrap:wrap}
.reviews-rate .rr-stars{color:var(--gold);letter-spacing:.14em;font-size:15px}
.reviews-rate b{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--cream)}
.reviews-rate .rr-dot{color:var(--gold-soft)}
.t-head{display:flex;align-items:center;gap:12px}
.t-ava{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--av,#b08e4e);color:#fff;font-family:var(--serif);font-weight:700;font-size:17px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.t-who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.t-who b{font-family:var(--sans);font-weight:600;font-size:14.5px;color:var(--cream)}
.t-who span{font-size:11.5px;color:var(--ink-mute);letter-spacing:.02em}
.stars{color:var(--gold);font-size:13px;letter-spacing:.22em;line-height:1}
.t-card blockquote,.tf-card blockquote{font-family:var(--sans);font-style:normal;font-size:14.5px;line-height:1.62;color:var(--ink-soft);margin:0}
/* two featured long-form reviews */
.testi-featured{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.tf-card{display:flex;flex-direction:column;gap:15px;border:1px solid var(--gold-soft);border-radius:12px;background:rgba(240,231,211,.042);padding:30px 32px;margin:0;position:relative;transition:border-color .3s var(--ease),background .3s}
.tf-card::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:2px;background:var(--gold);border-radius:2px;opacity:.65}
.tf-card blockquote{font-size:15.5px;line-height:1.65;color:var(--cream)}
.tf-card:hover{border-color:var(--gold);background:rgba(240,231,211,.06)}
/* masonry wall of shorter reviews */
.testi-wall{columns:3;column-gap:16px;margin-top:16px}
.t-card{display:flex;flex-direction:column;gap:13px;border:1px solid var(--gold-soft);border-radius:10px;background:rgba(240,231,211,.03);padding:22px 22px;margin:0 0 16px;break-inside:avoid;-webkit-column-break-inside:avoid;transition:border-color .3s var(--ease),background .3s}
.t-card:hover{border-color:var(--gold);background:rgba(240,231,211,.06)}
@media (max-width:900px){.testi-featured{grid-template-columns:1fr}.testi-wall{columns:2}}
@media (max-width:600px){
  .testi-wall{columns:2;column-gap:9px}
  .t-card{padding:13px 12px;margin-bottom:9px;gap:9px}
  .t-card blockquote{font-size:12.5px;line-height:1.5}
  .t-card .t-ava{width:26px;height:26px;font-size:12px;flex:0 0 26px}
  .t-card .t-who b{font-size:12px}
  .t-card .t-who span{font-size:10.5px}
}
@media (max-width:380px){ .testi-wall{columns:1} }

/* ---------- pull quote (beige band) ---------- */
.pullquote{max-width:780px;margin:0 auto;text-align:center}
.pullquote .stars{color:var(--gold-deep);font-size:14px;letter-spacing:.24em;display:block;margin-bottom:18px}
.pullquote blockquote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(20px,3.2vw,31px);line-height:1.45;color:var(--cream-ink);margin:0}
.pullquote figcaption{margin-top:18px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}

/* ---------- gallery filter chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 34px}
.chip{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cream);background:transparent;border:1px solid var(--gold-soft);border-radius:100px;padding:10px 19px;cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.chip:hover{color:var(--gold);border-color:var(--gold)}
.chip.on{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.gal figure.hide{display:none}

/* ---------- timeline (about) ---------- */
.timeline{position:relative;margin:44px 0 6px;padding-left:36px;border-left:1px solid var(--gold-soft);display:grid;gap:34px}
.tl-item{position:relative}
.tl-item::before{content:"";position:absolute;left:-41px;top:7px;width:9px;height:9px;background:var(--gold);transform:rotate(45deg)}
.tl-item .tl-y{display:block;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--gold);margin-bottom:8px}
.tl-item h3{font-family:var(--serif);font-weight:700;font-size:clamp(20px,2.4vw,26px);color:var(--cream);line-height:1.1;margin-bottom:8px}
.tl-item p{color:var(--ink-soft);font-size:14.5px;line-height:1.7;max-width:62ch}

/* ---------- values (about) ---------- */
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
.val-card{border:1px solid var(--gold-soft);border-radius:10px;padding:30px 26px;background:rgba(240,231,211,.03)}
.val-card .vi{width:30px;height:30px;color:var(--gold);margin-bottom:16px}
.val-card h3{font-family:var(--serif);font-weight:700;font-size:23px;color:var(--cream);margin-bottom:10px}
.val-card h3 em{font-style:italic;color:var(--gold)}
.val-card p{font-size:14px;color:var(--ink-soft);line-height:1.7}

/* ---------- sticky mobile CTA bar ---------- */
.sticky-cta{position:fixed;left:14px;right:14px;bottom:14px;z-index:180;display:none;grid-template-columns:1fr 1.35fr;gap:10px;opacity:0;transform:translateY(18px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.sticky-cta.show{opacity:1;transform:none;pointer-events:auto}
body.nav-open .sticky-cta{opacity:0;pointer-events:none}
.sticky-cta a{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 10px;border-radius:100px;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.sticky-cta a svg{width:15px;height:15px}
.sc-call{background:rgba(11,19,36,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--gold-soft);color:var(--cream);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.sc-quote{background:var(--gold);border:1px solid var(--gold);color:var(--navy);box-shadow:0 12px 30px rgba(0,0,0,.4)}
@media (max-width:820px){.sticky-cta{display:grid}.foot-bottom{padding-bottom:104px}}

/* ---------- responsive: new components ---------- */
@media (max-width:960px){
  .process{grid-template-columns:1fr 1fr}
  .val-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .process{grid-template-columns:1fr}
  .faq .fa{padding-right:0}
}

/* ---------- client logo rail (homepage) ----------
   Deliberately NOT a marquee. Moving logos scroll past before anyone reads them,
   and recognition is the entire point of showing them. Flattening every mark to
   one ink tone also solves a real problem: the logos are wildly different in
   colour and weight, and X-Golf ships white-on-transparent, which would vanish
   on this cream band. Colour returns on hover for the one you look at. */
.logo-rail{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:26px 30px;
  align-items:center;margin:38px 0 6px;padding:0}
.logo-rail li{display:grid;place-items:center;min-height:56px}
/* grayscale, NOT brightness(0): several of these marks are a filled shape with
   knocked-out white text (Home Depot, Medline) or a detailed seal (the service
   branches). Flattening to one tone turned those into solid squares and circles.
   Grayscale keeps the luminance difference so the artwork still reads. */
.logo-rail img{max-width:100%;max-height:52px;object-fit:contain;
  filter:grayscale(1) contrast(.92);opacity:.62;
  transition:opacity .3s var(--ease),filter .3s var(--ease),transform .3s var(--ease)}
/* X-Golf only ships a white-on-transparent mark, which is invisible on cream —
   it is monochrome anyway, so inverting it to ink loses nothing. */
.logo-rail img[src*="xgolf"]{filter:grayscale(1) brightness(0);opacity:.5}
@media (hover:hover){ .logo-rail li:hover img[src*="xgolf"]{filter:brightness(0);opacity:.85} }
@media (hover:hover){
  .logo-rail li:hover img{filter:none;opacity:1;transform:scale(1.06)}
}
/* The service seals are round, so at a shared max-height they read much smaller
   than a wide wordmark — same correction as the About wall. */
.logo-rail li:nth-last-child(-n+3) img{max-height:62px}
@media (max-width:900px){
  .logo-rail{grid-template-columns:repeat(3,1fr);gap:22px}
  .logo-rail img{max-height:44px;opacity:.5}
}
@media (max-width:520px){ .logo-rail{grid-template-columns:repeat(2,1fr)} }

/* Cream-band corrections for the work mosaic, which was built for the dark page:
   its caption sits on a gradient over the photo, so it still reads, but the tile
   border and hover need the darker gold to show up on cream. */
.band .gal figure{border-color:rgba(176,142,78,.45)}
@media (hover:hover){ .band .gal figure:hover{border-color:var(--gold-deep)} }

/* ---------- page hero photo (Our Shop) ----------
   A full-bleed band above the page title. Sits outside .wrap so it can reach the
   window edges, with a gradient foot so the navy page reads as continuing out of
   the photograph rather than butting against it. */
/* Pulled up by the nav offset so the photograph starts at the top of the window
   and the glass nav pill floats over it, matching the homepage. */
.ph-photo{position:relative;z-index:2;margin-top:calc(-1 * var(--navpad));width:100%;
  aspect-ratio:2400/880;min-height:calc(var(--navpad) + 220px);max-height:62svh;overflow:hidden}
.ph-photo img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.ph-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,32,56,.82) 0%,rgba(19,32,56,.30) 18%,rgba(19,32,56,0) 40%,rgba(19,32,56,0) 60%,rgba(19,32,56,.94) 100%)}
.ph-photo + .wrap .page-hero{padding-top:26px}
@media (max-width:760px){
  .ph-photo{aspect-ratio:4/3;max-height:46svh;min-height:calc(var(--navpad) + 180px)}
  .ph-photo img{object-position:center 45%}
}