/* ==========================================================================
   THE WISHING WELL — Fine Jewellery
   Design system: ink / ivory / antique gold. Display serif Bodoni Moda,
   body Inter. Built around the maison's own material — gold, glass,
   loupe-close craftsmanship — rather than a template.
   ========================================================================== */

:root{
  /* ---- palette ---- */
  --ink:        #121110;
  --ink-soft:   #4b463d;
  --ink-faint:  #8a8377;
  --ivory:      #FAF7F1;
  --ivory-deep: #F1EADB;
  --paper:      #FFFFFF;
  --gold:       #A6812E;
  --gold-light: #D8BD7C;
  --gold-pale:  #EDE2C3;
  --gold-deep:  #7C5D1F;
  --line:       rgba(18,17,16,0.13);
  --line-dark:  rgba(250,247,241,0.16);

  /* ---- type ---- */
  --font-display: 'Bodoni Moda', 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, sans-serif;

  /* ---- misc ---- */
  --ease: cubic-bezier(.22,.68,.16,1);
  --dur:  .7s;
  --wrap: 1240px;
  --radius: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:500; color:var(--ink); letter-spacing:.01em; }
p{ margin:0; }
svg{ display:block; }

::selection{ background:var(--gold-pale); color:var(--ink); }

:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 40px; }
@media (max-width:760px){ .wrap{ padding:0 22px; } }

.icon{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.3; }

/* ==========================================================================
   Scroll progress
   ========================================================================== */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));
  z-index:999;
}

/* ==========================================================================
   Type scale helpers
   ========================================================================== */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:.68rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold-deep);
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--gold-deep); }
.eyebrow.on-dark{ color:var(--gold-light); }
.eyebrow.on-dark::before{ background:var(--gold-light); }
.eyebrow.center{ justify-content:center; }

.section-head{ max-width:640px; margin:0 auto 56px; text-align:center; }
.section-head h2{ margin-top:16px; font-size:clamp(1.9rem,3.4vw,2.7rem); }
.section-head p{ margin-top:18px; font-size:1rem; color:var(--ink-soft); font-weight:300; }
.section-head.left{ margin-left:0; text-align:left; }

.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:5px;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.link-arrow svg{ width:14px; height:10px; transition:transform .4s var(--ease); }
.link-arrow:hover{ color:var(--gold-deep); border-color:var(--gold-deep); gap:14px; }
.link-arrow.on-dark{ color:var(--ivory); border-color:var(--ivory); }
.link-arrow.on-dark:hover{ color:var(--gold-light); border-color:var(--gold-light); }

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 32px; font-size:.73rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  background:#fff; color:var(--ink); border:1px solid var(--gold-deep);
  border-radius:3px; overflow:hidden; isolation:isolate;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 14px 26px -20px rgba(18,17,16,.4);
  transition:color .5s var(--ease), border-color .5s var(--ease), box-shadow .4s var(--ease);
}
.btn::before{
  content:''; position:absolute; inset:-1px; z-index:-1;
  background:linear-gradient(120deg, var(--gold-deep) 0%, var(--gold) 50%, var(--gold-light) 100%);
  transform:scaleX(0); transform-origin:left center; transition:transform .55s cubic-bezier(.65,0,.35,1);
}
.btn:hover::before{ transform:scaleX(1); }
.btn:hover{ color:#fff; border-color:var(--gold-deep); box-shadow:0 18px 32px -16px rgba(124,93,31,.5); }
.btn::after{
  content:''; width:7px; height:7px; flex-shrink:0; margin-left:1px;
  border-top:1.4px solid currentColor; border-right:1.4px solid currentColor;
  transform:rotate(45deg); transition:transform var(--dur) var(--ease), margin var(--dur) var(--ease);
}
.btn:hover::after{ margin-left:6px; }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--gold-deep); box-shadow:none; }
.btn.ghost:hover{ color:#fff; border-color:var(--gold-deep); box-shadow:0 16px 28px -20px rgba(124,93,31,.4); }
.btn.on-dark{ background:transparent; color:var(--ivory); border-color:rgba(250,247,241,.45); box-shadow:none; }
.btn.on-dark::before{ background:linear-gradient(120deg, var(--gold-light) 0%, var(--gold) 60%, var(--gold-deep) 100%); }
.btn.on-dark:hover{ color:var(--ink); border-color:var(--gold-light); }

/* ==========================================================================
   Reveal / curtain animations
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }
.stagger .reveal{ transition-delay:calc(var(--i,0) * 90ms); }

.curtain{ overflow:hidden; display:block; }
.curtain span{ display:block; transform:translateY(105%); transition:transform 1s var(--ease); }
.curtain.in-view span{ transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal,.curtain span{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  background:rgba(250,247,241,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--dur) var(--ease), padding var(--dur) var(--ease);
}
header.scrolled{ box-shadow:0 8px 30px -18px rgba(18,17,16,.35); }
.nav-inner{
  max-width:var(--wrap); margin:0 auto; padding:22px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:padding var(--dur) var(--ease);
}
header.scrolled .nav-inner{ padding:14px 40px; }

.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand-mark{ width:30px; height:30px; object-fit:contain; }
.brand-name{
  font-family:var(--font-display); font-size:1.18rem; letter-spacing:.03em; color:var(--ink);
}

.links{
  display:flex; align-items:center; gap:34px; flex-wrap:wrap; justify-content:center;
}
.links > a, .nav-drop > button{
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:inherit; position:relative; padding:6px 0; background:none; border:none;
  display:inline-flex; align-items:center; gap:6px;
}
.links > a::after, .nav-drop > button::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold-deep);
  transition:right .4s var(--ease);
}
.links > a:hover::after, .links > a.active::after, .nav-drop:hover > button::after{ right:0; }
.links > a.active{ color:var(--gold-deep); }
.nav-drop{ position:relative; }
.nav-drop > button svg{ width:9px; height:9px; transition:transform .3s var(--ease); }
.nav-drop:hover > button svg{ transform:rotate(180deg); }

.nav-menu{
  position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%) translateY(8px);
  width:560px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 30px 60px -20px rgba(18,17,16,.25);
  padding:10px; display:grid; grid-template-columns:1fr 1fr; gap:2px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index:10;
}
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-menu a{
  display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--radius);
  transition:background .25s;
}
.nav-menu a:hover{ background:var(--ivory); }
.nav-menu .nm-ic{
  width:38px; height:38px; border-radius:50%; background:var(--ivory-deep); color:var(--gold-deep);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.nav-menu .nm-ic svg{ width:17px; height:17px; }
.nav-menu h5{ margin:0; font-family:var(--font-body); font-weight:600; font-size:.82rem; color:var(--ink); text-transform:none; letter-spacing:.01em; }
.nav-menu span{ display:block; font-size:.72rem; color:var(--ink-faint); margin-top:2px; }

.nav-cta{ display:flex; align-items:center; gap:24px; flex-shrink:0; }
.nav-phone{
  display:inline-flex; align-items:center; gap:11px; position:relative; padding-right:24px;
  font-size:.82rem; font-weight:500; letter-spacing:.02em; color:var(--ink); white-space:nowrap;
  transition:color .35s var(--ease);
}
.nav-phone::after{
  content:''; position:absolute; right:0; top:50%; width:1px; height:22px;
  transform:translateY(-50%); background:var(--line);
}
.nav-phone .ic-circle{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--gold-deep);
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.nav-phone .ic-circle svg{ width:13px; height:13px; }
.nav-phone:hover{ color:var(--gold-deep); }
.nav-phone:hover .ic-circle{ background:var(--gold-deep); border-color:var(--gold-deep); color:#fff; }
.links > a.mobile-cta{ display:none; }

.menu-btn{ position:relative; z-index:20; display:none; flex-direction:column; justify-content:center; gap:5px; width:26px; height:20px; background:none; border:none; padding:0; }
.menu-btn span{ display:block; height:1px; background:currentColor; width:100%; transition:transform .3s var(--ease), opacity .3s; }
.links.open ~ .menu-btn span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.links.open ~ .menu-btn span:nth-child(2){ opacity:0; }
.links.open ~ .menu-btn span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:980px){
  .nav-cta{ display:none; }
  .links > a.mobile-cta{ display:inline-flex; margin-top:28px; }
  .links{
    position:fixed; inset:0 0 0 auto; width:min(360px,86vw); height:100vh;
    background:var(--ink); color:var(--ivory); flex-direction:column; flex-wrap:nowrap; align-items:flex-start;
    justify-content:flex-start; gap:0; padding:110px 36px 40px; transform:translateX(100%);
    transition:transform .5s var(--ease); overflow-y:auto;
  }
  .links.open{ transform:translateX(0); }
  .links > a, .nav-drop{ width:100%; padding:16px 0; border-bottom:1px solid var(--line-dark); }
  .links > a::after{ display:none; }
  .nav-drop > button{ width:100%; justify-content:space-between; color:var(--ivory); }
  .nav-menu{ position:static; opacity:1; visibility:visible; transform:none; width:100%; background:none;
    border:none; box-shadow:none; grid-template-columns:1fr; padding:0 0 6px; display:none; }
  .nav-drop.open .nav-menu{ display:grid; }
  .nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu{ transform:none; }
  .nav-menu a:hover{ background:rgba(250,247,241,.06); }
  .nav-menu .nm-ic{ background:rgba(250,247,241,.08); }
  .nav-menu h5{ color:var(--ivory); }
  .menu-btn{ display:flex; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  color:#fff; overflow:hidden; background:var(--ink);
}
.hero-media-bg{ position:absolute; inset:0; z-index:0; }
.hero-media-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-media-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,17,16,.15) 0%, rgba(18,17,16,.25) 40%, rgba(18,17,16,.88) 100%);
}
.hero-content{ position:relative; z-index:1; width:100%; padding:0 40px clamp(160px,26vh,260px); max-width:var(--wrap); margin:0 auto; }
.hero-eyebrow{ color:var(--gold-light); }
.hero-eyebrow::before{ background:var(--gold-light); }
.hero-title{ margin-top:20px; font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.05; color:#fff; max-width:14ch; }
.hero-title em{ font-style:italic; color:var(--gold-light); }
.hero-sub{ margin-top:26px; max-width:42ch; font-size:1.03rem; color:rgba(255,255,255,.82); font-weight:300; }
.hero-actions{ margin-top:38px; display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.hero-scroll{
  position:absolute; right:40px; bottom:40px; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(255,255,255,.65); font-size:.65rem; letter-spacing:.24em; text-transform:uppercase;
}
.hero-scroll .line{ width:1px; height:46px; background:linear-gradient(180deg,rgba(255,255,255,.65),transparent); animation:scrollLine 2.2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }
@media (max-width:760px){ .hero-scroll{ display:none; } }

/* Page hero (service/interior pages) — shorter variant */
.page-hero{ min-height:64vh; }
.page-hero .hero-content{ padding-bottom:70px; }
@media (max-width:760px){
  .hero-content{ padding-top:118px; }
  .page-hero{ min-height:auto; }
  .page-hero .hero-content{ padding-bottom:52px; }
}
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:.72rem; letter-spacing:.06em; color:rgba(255,255,255,.6); margin-bottom:22px; }
.breadcrumb a{ color:rgba(255,255,255,.85); }
.breadcrumb a:hover{ color:var(--gold-light); }

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust-strip{ background:var(--ink); color:var(--ivory); }
.trust-row{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding-top:26px; padding-bottom:26px; border-top:1px solid var(--line-dark);
}
.trust-item{ display:flex; align-items:center; gap:12px; font-size:.76rem; letter-spacing:.04em; color:rgba(250,247,241,.85); }
.trust-item svg{ width:18px; height:18px; color:var(--gold-light); flex-shrink:0; }
@media (max-width:760px){
  .trust-row{
    display:grid; grid-template-columns:1fr 1fr; gap:30px 16px; justify-items:center;
    padding-top:36px; padding-bottom:36px;
  }
  .trust-item{ flex-direction:column; gap:10px; text-align:center; font-size:.72rem; }
  .trust-item svg{ width:22px; height:22px; }
}

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee{
  overflow:hidden; white-space:nowrap; background:var(--ivory-deep);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:16px 0;
}
.marquee-track{ display:inline-flex; animation:marquee 32s linear infinite; }
.marquee-track span{
  display:inline-flex; align-items:center; font-family:var(--font-display); font-style:italic;
  font-size:1.05rem; color:var(--ink-soft); padding:0 34px; white-space:nowrap;
}
.marquee-track span::after{ content:'\2726'; font-family:var(--font-body); font-style:normal; color:var(--gold); margin-left:34px; font-size:.7rem; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* ==========================================================================
   Statement
   ========================================================================== */
.statement{ padding:110px 0 64px; text-align:center; }
.statement blockquote{
  margin:0 auto; max-width:920px; font-family:var(--font-display); font-weight:400; font-style:italic;
  font-size:clamp(1.6rem,3.2vw,2.5rem); line-height:1.5; color:var(--ink);
}
.statement blockquote .amp{ color:var(--gold-deep); }
.statement cite{ display:block; margin-top:30px; font-style:normal; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }

/* ---- Ornamental divider (between statement and next section) ---- */
.ornament-divider{
  display:flex; align-items:center; justify-content:center; gap:22px;
  max-width:460px; margin:0 auto; padding:0 40px;
}
.ornament-divider .od-line{ flex:1; height:1px; background:var(--line); position:relative; overflow:hidden; }
.ornament-divider .od-line::after{
  content:''; position:absolute; top:0; left:-45%; width:45%; height:100%;
  background:linear-gradient(90deg, transparent, var(--gold-light) 50%, transparent);
  animation:glintSweep 3.8s ease-in-out infinite;
}
.ornament-divider .od-line.rev::after{ animation-delay:1.9s; }
.ornament-divider .od-icon{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--paper);
  display:flex; align-items:center; justify-content:center; color:var(--gold-deep); flex-shrink:0;
}
.ornament-divider .od-icon svg{ width:16px; height:16px; animation:sparkleSpin 9s linear infinite; }
@keyframes glintSweep{ 0%{ left:-45%; } 60%,100%{ left:110%; } }
@keyframes sparkleSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .ornament-divider .od-line::after{ animation:none; }
  .ornament-divider .od-icon svg{ animation:none; }
}

/* ==========================================================================
   Category / services grid
   ========================================================================== */
.category-section{ padding:64px 0 120px; }
.category-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
.category-item{
  position:relative; background:var(--paper); aspect-ratio:4/5; overflow:hidden; display:flex; align-items:flex-end;
}
.category-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .8s; filter:saturate(.92); }
.category-item::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,17,16,0) 40%, rgba(18,17,16,.82) 100%); z-index:1; transition:background .5s; }
.category-item:hover img{ transform:scale(1.08); }
.cat-body{ position:relative; z-index:2; padding:28px; color:#fff; width:100%; }
.cat-num{ font-family:var(--font-body); font-size:.66rem; letter-spacing:.2em; color:var(--gold-light); }
.cat-body h3{ color:#fff; font-size:1.4rem; margin-top:8px; }
.cat-body span.tag{ display:block; margin-top:6px; font-size:.78rem; color:rgba(255,255,255,.78); font-weight:300; }
.cat-arrow{
  position:absolute; top:24px; right:24px; z-index:2; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background .35s var(--ease), border-color .35s, transform .35s var(--ease);
}
.cat-arrow svg{ width:14px; height:14px; }
.category-item:hover .cat-arrow{ background:var(--gold); border-color:var(--gold); transform:rotate(45deg); }

@media (max-width:900px){ .category-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .category-grid{ grid-template-columns:1fr; } .category-item{ aspect-ratio:5/4; } }

/* ==========================================================================
   Loupe / signature detail section
   ========================================================================== */
.loupe-section{ background:var(--ink); color:var(--ivory); padding:130px 0; overflow:hidden; }
.loupe-grid{ display:grid; grid-template-columns:.85fr 1fr; gap:80px; align-items:center; }
.loupe-copy h2{ color:#fff; }
.loupe-copy p{ margin-top:22px; color:rgba(250,247,241,.75); max-width:46ch; }
.loupe-list{ margin-top:34px; display:flex; flex-direction:column; gap:16px; }
.loupe-list li{ display:flex; align-items:center; gap:14px; font-size:.86rem; color:rgba(250,247,241,.85); }
.loupe-list svg{ width:16px; height:16px; color:var(--gold-light); flex-shrink:0; }

.loupe-frame{
  position:relative; aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  border:1px solid var(--line-dark); max-width:520px; margin:0 auto;
}
.loupe-frame img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){ .loupe-grid{ grid-template-columns:1fr; gap:56px; } .loupe-copy{ order:2; } }

/* ==========================================================================
   Why us / feature cards (dark)
   ========================================================================== */
.why-us{ background:var(--ivory-deep); padding:120px 0; }
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:56px; }
.why-card{ background:var(--paper); padding:44px 32px; }
.why-ic{ width:46px; height:46px; border-radius:50%; background:var(--ivory-deep); color:var(--gold-deep); display:flex; align-items:center; justify-content:center; }
.why-ic svg{ width:20px; height:20px; }
.why-card h3{ margin-top:24px; font-size:1.12rem; }
.why-card p{ margin-top:12px; font-size:.9rem; }
@media (max-width:900px){ .why-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Story / collage
   ========================================================================== */
.craft{ padding:130px 0; }
.craft-head{ max-width:640px; margin-bottom:60px; }
.craft-head h2{ margin-top:16px; }
.craft-head p{ margin-top:20px; max-width:52ch; font-size:1rem; color:var(--ink-soft); }
.collage{ display:grid; grid-template-columns:1.4fr 1fr; gap:16px; aspect-ratio:7/5; }
.collage-main, .collage-side{ height:100%; }
.collage-main img, .collage-side img{ width:100%; height:100%; object-fit:cover; display:block; }
.collage-main{ overflow:hidden; }
.collage-side{ display:grid; grid-template-rows:1fr 1fr; gap:16px; }
.collage-side > div{ overflow:hidden; height:100%; }
.craft-copy{ display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:56px; align-items:start; }
.craft-copy p{ font-size:1rem; }
.craft-areas h4{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); font-family:var(--font-body); font-weight:600; margin-bottom:16px; }
@media (max-width:900px){
  .collage{ grid-template-columns:1fr; aspect-ratio:auto; }
  .collage-main{ aspect-ratio:4/5; height:auto; }
  .collage-side{ grid-template-columns:1fr 1fr; grid-template-rows:1fr; height:auto; }
  .collage-side > div{ aspect-ratio:1/1; height:auto; }
  .craft-copy{ grid-template-columns:1fr; gap:30px; }
}

.area-list{ display:flex; flex-wrap:wrap; gap:10px; }
.area-list span{
  font-size:.74rem; letter-spacing:.04em; padding:9px 16px; border:1px solid var(--line); border-radius:30px;
  color:var(--ink-soft);
}

/* ==========================================================================
   Stats strip
   ========================================================================== */
.strip{ background:var(--ink); color:var(--ivory); padding:64px 0; }
.strip .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center; }
.strip-item{ border-left:1px solid var(--line-dark); padding-left:30px; text-align:left; }
.strip-item:first-child{ border-left:none; padding-left:0; }
.strip .ic{ width:26px; height:26px; color:var(--gold-light); margin-bottom:16px; }
.strip .num{ font-family:var(--font-display); font-size:2.1rem; color:#fff; }
.strip .lab{ margin-top:6px; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(250,247,241,.65); }
@media (max-width:820px){ .strip .wrap{ grid-template-columns:1fr 1fr; row-gap:40px; } .strip-item{ border-left:none; padding-left:0; border-top:1px solid var(--line-dark); padding-top:24px; } .strip-item:nth-child(-n+2){ border-top:none; padding-top:0; } }

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews{ padding:130px 0; }
.reviews-summary{ display:flex; align-items:center; gap:26px; margin-bottom:56px; flex-wrap:wrap; }
.reviews-score{ font-family:var(--font-display); font-size:2.4rem; color:var(--ink); }
.reviews-score span{ font-size:1.1rem; color:var(--ink-faint); }
.reviews-stars{ display:flex; gap:3px; color:var(--gold); }
.reviews-stars svg{ width:16px; height:16px; }
.reviews-meta{ font-size:.85rem; color:var(--ink-faint); }
.reviews-meta a{ color:var(--gold-deep); border-bottom:1px solid var(--gold-deep); }
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
.review-card{ background:var(--paper); padding:40px 34px; display:flex; flex-direction:column; }
.review-card .stars{ display:flex; gap:3px; color:var(--gold); margin-bottom:20px; }
.review-card .stars svg{ width:13px; height:13px; }
.review-card p{ font-size:.96rem; color:var(--ink-soft); flex:1; }
.review-author{ display:block; margin-top:22px; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
@media (max-width:900px){ .reviews-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq{ padding:130px 0; background:var(--ivory-deep); }
.faq-list{ max-width:820px; margin:0 auto; }
.faq-item{
  border-bottom:1px solid var(--line); padding:6px 0;
}
.faq-item summary{
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 4px; cursor:pointer; font-family:var(--font-display); font-size:1.12rem; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item .fq-icon{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line); flex-shrink:0; position:relative; transition:border-color .3s, background .3s; }
.faq-item .fq-icon::before, .faq-item .fq-icon::after{ content:''; position:absolute; background:var(--ink); transition:transform .35s var(--ease), background .3s; }
.faq-item .fq-icon::before{ top:50%; left:6px; right:6px; height:1px; transform:translateY(-.5px); }
.faq-item .fq-icon::after{ left:50%; top:6px; bottom:6px; width:1px; transform:translateX(-.5px); }
.faq-item[open] .fq-icon{ background:var(--ink); border-color:var(--ink); }
.faq-item[open] .fq-icon::before, .faq-item[open] .fq-icon::after{ background:#fff; }
.faq-item[open] .fq-icon::after{ transform:translateX(-.5px) rotate(90deg); opacity:0; }
.faq-item p{ padding:0 42px 26px 4px; font-size:.94rem; color:var(--ink-soft); max-width:66ch; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta{ position:relative; padding:150px 0; text-align:center; color:#fff; overflow:hidden; }
.cta .arch-bg{ position:absolute; inset:0; z-index:0; }
.cta .arch-bg img{ width:100%; height:100%; object-fit:cover; }
.cta .arch-bg::after{ content:''; position:absolute; inset:0; background:rgba(18,17,16,.72); }
.cta > *{ position:relative; z-index:1; }
.cta .eyebrow{ justify-content:center; }
.cta h2{ color:#fff; margin-top:18px; font-size:clamp(2rem,4vw,3rem); max-width:16ch; margin-left:auto; margin-right:auto; }
.cta p{ margin-top:20px; color:rgba(255,255,255,.82); max-width:44ch; margin-left:auto; margin-right:auto; }
.cta .btn{ margin-top:38px; }
.cta-mark{ width:52px; height:52px; margin:0 auto 26px; opacity:.9; }

/* ==========================================================================
   Detail layout (service pages)
   ========================================================================== */
.detail{ padding:130px 0; }
.detail-grid{ display:grid; grid-template-columns:1fr .95fr; gap:80px; align-items:center; }
.detail-intro p{ font-size:1.02rem; margin-top:20px; }
.feature-list{ margin-top:36px; display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.feature-row{ display:flex; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); font-size:.95rem; color:var(--ink); }
.feature-row .fi{ width:34px; height:34px; border-radius:50%; background:var(--ivory-deep); color:var(--gold-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.feature-row .fi svg{ width:15px; height:15px; }
.detail-media{ position:relative; }
.detail-media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.detail-media .badge{
  position:absolute; bottom:-24px; left:-24px; background:var(--ink); color:#fff; padding:22px 26px;
  font-family:var(--font-display); font-size:1.05rem; max-width:230px; box-shadow:0 20px 40px -12px rgba(18,17,16,.35);
}
.detail-media .badge span{ display:block; font-family:var(--font-body); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-light); margin-bottom:8px; }
@media (max-width:900px){ .detail-grid{ grid-template-columns:1fr; gap:48px; } .detail-media{ order:-1; } .detail-media .badge{ left:16px; bottom:16px; } }

/* Info cards row (pricing / turnaround / guarantee) */
.info-cards{ padding:0 0 130px; }
.info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.info-card{ background:var(--paper); padding:40px 34px; text-align:left; }
.info-card .ic{ width:42px; height:42px; border-radius:50%; background:var(--ivory-deep); color:var(--gold-deep); display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.info-card .ic svg{ width:19px; height:19px; }
.info-card h4{ font-size:1.05rem; }
.info-card p{ margin-top:10px; font-size:.88rem; }
@media (max-width:820px){ .info-grid{ grid-template-columns:1fr; } }

/* What to bring checklist */
.checklist{ padding:0 0 130px; }
.checklist-inner{ background:var(--ivory-deep); padding:64px; display:grid; grid-template-columns:.8fr 1fr; gap:60px; align-items:center; }
.checklist ul{ display:flex; flex-direction:column; gap:18px; }
.checklist li{ display:flex; align-items:flex-start; gap:14px; font-size:.94rem; color:var(--ink); }
.checklist li svg{ width:17px; height:17px; color:var(--gold-deep); flex-shrink:0; margin-top:2px; }
@media (max-width:900px){ .checklist-inner{ grid-template-columns:1fr; padding:44px 30px; gap:30px; } }

/* Process steps */
.process{ padding:130px 0; background:var(--ivory-deep); }
.process-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; margin-top:56px; }
.process-step{ position:relative; padding-top:34px; border-top:1px solid var(--line); }
.process-num{ font-family:var(--font-display); font-style:italic; font-size:1.5rem; color:var(--gold-deep); }
.process-step h3{ margin-top:16px; font-size:1.05rem; }
.process-step p{ margin-top:10px; font-size:.88rem; }
@media (max-width:900px){ .process-steps{ grid-template-columns:1fr 1fr; row-gap:36px; } }
@media (max-width:560px){ .process-steps{ grid-template-columns:1fr; } }

/* Testimonial */
.testimonial{ padding:120px 0; }
.testimonial-inner{ max-width:760px; margin:0 auto; text-align:center; }
.testimonial-mark{ font-family:var(--font-display); font-size:3.6rem; color:var(--gold); line-height:1; }
.testimonial-quote{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.3rem,2.6vw,1.8rem); color:var(--ink); line-height:1.5; margin-top:8px; }
.testimonial-divider{ width:40px; height:1px; background:var(--gold-deep); margin:30px auto; }
.testimonial-author{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }

/* Related */
.related{ padding:0 0 130px; }
.related-list{ display:flex; flex-direction:column; }
.related-row{
  display:flex; align-items:center; justify-content:space-between; padding:28px 4px;
  border-bottom:1px solid var(--line); transition:padding-left .35s var(--ease), color .3s;
}
.related-row:first-child{ border-top:1px solid var(--line); }
.related-row:hover{ padding-left:16px; color:var(--gold-deep); }
.related-row h4{ font-size:1.2rem; color:inherit; }
.related-row .tag{ display:block; margin-top:6px; font-size:.8rem; color:var(--ink-faint); font-weight:300; }
.link-arrow-circle{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .3s,border-color .3s,color .3s; }
.related-row:hover .link-arrow-circle{ background:var(--gold-deep); border-color:var(--gold-deep); color:#fff; }
.link-arrow-circle svg{ width:15px; height:15px; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; padding:130px 0 110px; }
.contact-row{ display:flex; align-items:flex-start; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); }
.contact-row .ic{ width:40px; height:40px; border-radius:50%; background:var(--ivory-deep); color:var(--gold-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-row .ic svg{ width:17px; height:17px; }
.contact-row h4{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); font-family:var(--font-body); font-weight:600; }
.contact-row span{ display:block; margin-top:6px; font-size:1.02rem; color:var(--ink); }
.contact-row a:hover{ color:var(--gold-deep); }

.form{ background:var(--ivory-deep); padding:52px; display:flex; flex-direction:column; gap:20px; }
.form label{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:-10px; }
.form input, .form textarea, .form select{
  width:100%; border:none; border-bottom:1px solid var(--line); background:transparent; padding:12px 4px;
  font-family:var(--font-body); font-size:.98rem; color:var(--ink); transition:border-color .3s;
}
.form input:focus, .form textarea:focus, .form select:focus{ border-color:var(--gold-deep); outline:none; }
.form textarea{ resize:vertical; min-height:110px; }
.form .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.form-status{ font-size:.85rem; min-height:1.2em; margin:0; }
.form-status.is-success{ color:#3f6b3f; }
.form-status.is-error{ color:#a33f3f; }
.form button[disabled]{ opacity:.6; cursor:default; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:50px; } .form{ padding:34px; } }

.map-embed{ width:100%; aspect-ratio:16/6; filter:grayscale(.4) contrast(1.05); border:1px solid var(--line); }
@media (max-width:760px){ .map-embed{ aspect-ratio:4/5; } }

/* ==========================================================================
   Footer
   ========================================================================== */
footer{ background:var(--ink); color:rgba(250,247,241,.7); padding:100px 0 0; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:60px; padding-bottom:70px; border-bottom:1px solid var(--line-dark); }
.foot-brand{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.foot-brand .brand-mark{ filter:none; }
.foot-brand span{ font-family:var(--font-display); font-size:1.2rem; color:#fff; }
.foot-grid > div > p{ font-size:.88rem; max-width:32ch; }
.foot-social{ display:flex; gap:14px; margin-top:26px; }
.foot-social a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; transition:background .3s,border-color .3s; }
.foot-social a svg{ width:15px; height:15px; }
.foot-social a:hover{ background:var(--gold-deep); border-color:var(--gold-deep); }
footer h4{ color:#fff; font-family:var(--font-body); font-weight:600; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:24px; }
footer ul{ display:flex; flex-direction:column; gap:13px; }
footer ul a{ font-size:.88rem; display:inline-flex; align-items:center; gap:8px; }
footer ul a:hover{ color:var(--gold-light); }
.foot-grid .icon{ color:var(--gold-light); flex-shrink:0; }
.foot-hours li{ display:flex; justify-content:space-between; font-size:.85rem; gap:14px; }
.foot-hours span:last-child{ color:rgba(250,247,241,.5); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding:28px 0; font-size:.76rem; color:rgba(250,247,241,.45); flex-wrap:wrap; gap:10px; }
.foot-bottom a:hover{ color:var(--gold-light); }
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; row-gap:44px; } }
@media (max-width:560px){ .foot-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Misc utility
   ========================================================================== */
.no-js .reveal, .no-js .curtain span{ opacity:1; transform:none; }

/* ==========================================================================
   Mobile section spacing — desktop uses generous 110–150px section padding
   which is far too much dead space stacked between sections on a phone
   screen, so every major section is tightened up here for small viewports.
   ========================================================================== */
@media (max-width:760px){
  .category-section{ padding:48px 0 64px; }
  .loupe-section{ padding:64px 0; }
  .why-us{ padding:64px 0; }
  .craft{ padding:64px 0; }
  .reviews{ padding:64px 0; }
  .faq{ padding:64px 0; }
  .cta{ padding:80px 0; }
  .detail{ padding:64px 0; }
  .process{ padding:64px 0; }
  .testimonial{ padding:64px 0; }
  .contact-grid{ padding:64px 0 56px; }
  .statement{ padding:64px 0 40px; }
  .info-cards{ padding:0 0 64px; }
  .checklist{ padding:0 0 64px; }
  footer{ padding-top:64px; }
}