/* ==========================================================================
   Regional Website Design — Design tokens
   Paper/fog/ink neutrals, one restrained accent (brass — a warm, confident
   gold standing in for craft and quality). Editorial serif display; the
   capability tiles below are live functional demos, not photography.
   ========================================================================== */

:root{
  --paper: #F5F3EE;
  --paper-2: #EFEBE2;
  --fog: #E7E2D8;
  --ink: #1E1C19;
  --ink-70: rgba(30,28,25,.7);
  --ink-45: rgba(30,28,25,.45);
  --slate: #C2BCAD;
  --slate-line: rgba(30,28,25,.14);
  --brass: #8C6A34;
  --brass-dim: #74582B;
  --paper-shadow: rgba(30,28,25,.10);

  --display: "Cormorant", "Iowan Old Style", ui-serif, Georgia, serif;
  --body: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1360px;
  --gutter: clamp(24px, 5vw, 80px);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,blockquote,figure{ margin:0; }
button{ font-family:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }

::selection{ background:var(--brass); color:var(--paper); }

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:4px;
}

.grain{
  position:fixed; inset:0; z-index:999; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{
  font-family:var(--body);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:500;
}

.section-title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(34px, 5vw, 64px);
  line-height:1.05;
  letter-spacing:-.01em;
  margin-top:18px;
}
.section-title em{ font-style:italic; font-weight:400; color:var(--brass); }

.section-head{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

.text-link{
  display:inline-block;
  margin-top:28px;
  font-size:14px;
  letter-spacing:.03em;
  border-bottom:1px solid var(--slate-line);
  padding-bottom:3px;
  transition:border-color .3s var(--ease-out), color .3s var(--ease-out);
}
.text-link:hover{ border-color:var(--brass); color:var(--brass); }

/* ==========================================================================
   Sale banner
   ========================================================================== */
:root{ --banner-h: 44px; }

.sale-banner{
  position:fixed; top:0; left:0; right:0; z-index:210; height:var(--banner-h);
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center; gap:20px;
  padding:0 56px; overflow:hidden;
  transform-origin:top; transition:transform .4s var(--ease-out), opacity .3s var(--ease-out);
}
body.banner-dismissed .sale-banner{ transform:translateY(-100%); opacity:0; pointer-events:none; }

.sale-banner-text{ font-size:13px; letter-spacing:.01em; white-space:nowrap; }
.sale-banner-text strong{ color:var(--brass); font-weight:600; }
.sale-price{ color:var(--brass); font-weight:600; margin:0 2px; }
.sale-was{ text-decoration:line-through; color:rgba(245,243,238,.45); margin-left:4px; }

.sale-countdown{ display:flex; gap:10px; flex-shrink:0; }
.cd-unit{
  display:flex; align-items:baseline; gap:2px; font-variant-numeric:tabular-nums;
  font-size:13px; font-weight:600; color:var(--paper);
}
.cd-unit em{ font-style:normal; font-size:10.5px; color:rgba(245,243,238,.5); margin-left:1px; }

.sale-close{
  position:absolute; right:16px; font-size:18px; line-height:1; color:rgba(245,243,238,.5);
  padding:4px 6px;
}
.sale-close:hover{ color:var(--paper); }

@media (max-width:720px){
  .sale-banner{ padding:0 44px 0 16px; gap:10px; }
  .sale-banner-text{ font-size:11.5px; white-space:normal; line-height:1.3; }
  .sale-was{ display:none; }
  .sale-countdown{ gap:6px; }
  .cd-unit{ font-size:11.5px; }
}

/* ==========================================================================
   Nav
   ========================================================================== */
.site-nav{
  position:fixed; top:var(--banner-h); left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter);
  transition:background-color .5s var(--ease-out), border-color .5s var(--ease-out), transform .4s var(--ease-out);
  border-bottom:1px solid transparent;
}
body.banner-dismissed .site-nav{ transform:translateY(calc(-1 * var(--banner-h))); }
.site-nav.is-scrolled{
  background:rgba(245,243,238,.86);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--slate-line);
}
.nav-logo{
  font-family:var(--display);
  font-size:19px;
  letter-spacing:.01em;
  color:var(--ink);
  display:flex; flex-direction:column; line-height:1;
}
.nav-logo span{
  font-family:var(--body);
  font-size:9.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-45);
  margin-top:5px;
}
.nav-links{ display:flex; align-items:center; gap:38px; }
.nav-links a{
  font-size:13px; letter-spacing:.02em; color:var(--ink-70);
  position:relative; padding-bottom:2px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--brass); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease-out);
}
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{
  border:1px solid var(--ink); border-radius:100px;
  padding:9px 20px !important; color:var(--ink) !important;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background:var(--ink); color:var(--paper) !important; }

.nav-burger{ display:none; width:26px; height:18px; position:relative; }
.nav-burger span{
  position:absolute; left:0; right:0; height:1px; background:var(--ink);
}
.nav-burger span:first-child{ top:0; } .nav-burger span:last-child{ bottom:0; }

@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
}

.mobile-menu{
  position:fixed; inset:0; z-index:190; background:var(--paper);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:22px; padding:0 32px;
  transform:translateY(-100%); transition:transform .6s var(--ease-in-out);
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--display); font-size:34px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; height:100svh; min-height:560px; overflow:hidden;
  display:flex; align-items:flex-end;
  background:#17140f;
}
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,15,10,.28) 0%, rgba(18,15,10,.05) 30%, rgba(18,15,10,.58) 100%);
  pointer-events:none;
}
.hero-content{
  position:relative; z-index:2; color:var(--paper);
  padding:0 var(--gutter) 96px;
  width:100%;
}
.hero-content .eyebrow{ color:rgba(245,243,238,.8); }
.hero-headline{
  font-family:var(--display); font-weight:500;
  font-size:clamp(46px, 8.6vw, 116px);
  line-height:.98; letter-spacing:-.015em;
  margin:14px 0 26px;
}
.hero-headline .line{ display:block; overflow:hidden; }
.hero-headline em{ font-style:italic; }
.hero-sub{
  font-size:clamp(15px, 1.6vw, 19px);
  line-height:1.5; max-width:560px;
  color:rgba(245,243,238,.88);
  font-weight:300;
}
[data-reveal-line]{ overflow:hidden; }

.hero-scroll-cue{
  position:absolute; right:var(--gutter); bottom:40px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(245,243,238,.75);
}
.hero-scroll-cue .line{
  width:1px; height:46px; background:rgba(245,243,238,.4); position:relative; overflow:hidden;
}
.hero-scroll-cue .line::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--paper);
  animation:scrollcue 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollcue{ 0%{transform:translateY(-100%);} 50%{transform:translateY(0);} 100%{transform:translateY(100%);} }
.hero-scroll-cue .txt{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; writing-mode:vertical-rl; }

.hero-corner{
  position:absolute; z-index:2; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(245,243,238,.62);
}
.hero-corner--tl{ top:calc(110px + var(--banner-h)); left:var(--gutter); }
.hero-corner--br{ right:var(--gutter); top:calc(110px + var(--banner-h)); }
@media (max-width:720px){ .hero-corner{ display:none; } }

/* ==========================================================================
   Capabilities — live functional demos, not photography
   ========================================================================== */
.gallery{ padding:170px 0 140px; }
.gallery .section-head{ margin-bottom:80px; }
.section-sub{
  margin-top:20px; font-size:15.5px; line-height:1.6; color:var(--ink-45);
  max-width:52ch; font-weight:300;
}

.gallery-grid{
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(12,1fr); gap:28px 24px;
}
.gallery-item{ position:relative; }
.gallery-item figcaption{
  margin-top:14px; font-size:13px; color:var(--ink-45); letter-spacing:.01em; line-height:1.5;
}
.gallery-item figcaption span{
  display:block; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brass); margin-bottom:6px; font-weight:500;
}

/* Shared demo-tile shell: every capability is a live widget, framed the same
   way a photograph would be — the frame's job is still just to frame it. */
.demo-tile{
  position:relative; width:100%; overflow:hidden;
  background:var(--fog); border:1px solid var(--slate-line);
  clip-path:inset(100% 0 0 0);
  display:flex; align-items:stretch; justify-content:stretch;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.demo-tile:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -20px var(--paper-shadow); }

.gi-1 .demo-tile{ aspect-ratio:4/5; }
.gi-2 .demo-tile{ aspect-ratio:3/4; }
.gi-3 .demo-tile{ aspect-ratio:16/9; }
.gi-4 .demo-tile{ aspect-ratio:3/4; }
.gi-5 .demo-tile{ aspect-ratio:5/4; }
.gi-6 .demo-tile{ aspect-ratio:5/4; }

.gi-1{ grid-column:1 / 8; }
.gi-2{ grid-column:8 / 13; margin-top:90px; }
.gi-3{ grid-column:1 / 9; margin-top:10px; }
.gi-4{ grid-column:9 / 13; }
.gi-5{ grid-column:1 / 7; margin-top:40px; }
.gi-6{ grid-column:7 / 13; margin-top:110px; }

/* N01 — AI concierge chat */
.demo-chat-window{
  display:flex; flex-direction:column; width:100%; padding:22px;
  background:var(--ink); color:var(--paper);
}
.demo-chat-head{
  display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.06em;
  color:rgba(245,243,238,.7); padding-bottom:14px; margin-bottom:16px;
  border-bottom:1px solid rgba(245,243,238,.12);
}
.demo-dot{
  width:7px; height:7px; border-radius:50%; background:var(--brass);
  box-shadow:0 0 0 0 rgba(140,106,52,.6); animation:demoPulse 2.4s ease-out infinite;
}
@keyframes demoPulse{
  0%{ box-shadow:0 0 0 0 rgba(140,106,52,.55); }
  70%{ box-shadow:0 0 0 8px rgba(140,106,52,0); }
  100%{ box-shadow:0 0 0 0 rgba(140,106,52,0); }
}
.demo-chat-body{ display:flex; flex-direction:column; gap:10px; flex:1; overflow:hidden; }
.chat-msg{
  max-width:82%; padding:9px 13px; font-size:13.5px; line-height:1.45;
  border-radius:12px 12px 12px 3px; opacity:0; transform:translateY(6px);
  animation:chatIn .45s var(--ease-out) forwards;
}
.chat-msg.user{
  align-self:flex-end; background:var(--brass); color:#1b140a;
  border-radius:12px 12px 3px 12px;
}
.chat-msg.ai{
  align-self:flex-start; background:rgba(245,243,238,.08);
  border:1px solid rgba(245,243,238,.14);
}
@keyframes chatIn{ to{ opacity:1; transform:translateY(0); } }
.chat-typing{ display:flex; gap:4px; align-self:flex-start; padding:10px 13px; }
.chat-typing span{
  width:5px; height:5px; border-radius:50%; background:rgba(245,243,238,.5);
  animation:typingBounce 1.1s ease-in-out infinite;
}
.chat-typing span:nth-child(2){ animation-delay:.15s; }
.chat-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typingBounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }

/* N02 — real three.js */
.demo-3d{ background:var(--fog); cursor:grab; }
.demo-3d canvas{ width:100%; height:100%; display:block; }

/* N03 — instant booking */
.demo-booking{ flex-direction:column; padding:20px; gap:12px; background:var(--paper); }
.demo-booking-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--display); font-size:19px;
}
.demo-booking-head span{ font-family:var(--body); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45); }
.demo-booking-grid{
  display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:1fr; gap:6px; flex:1;
}
.demo-booking-grid .day{
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; border-radius:4px; color:var(--ink-45);
  border:1px solid transparent; transition:border-color .2s, background-color .2s;
}
.demo-booking-grid .day.is-open:hover{ border-color:var(--brass); cursor:pointer; }
.demo-booking-grid .day.is-booked{ color:var(--slate); text-decoration:line-through; }
.demo-booking-grid .day.is-selected{ background:var(--brass); color:#1b140a; font-weight:600; }
.demo-booking-btn{
  font-family:var(--body); font-size:12.5px; letter-spacing:.03em; padding:12px;
  background:var(--ink); color:var(--paper); border-radius:8px; text-align:center;
  transition:background-color .3s;
}
.demo-booking-btn:hover{ background:var(--brass-dim); }

/* N04 — kinetic marquee */
.demo-marquee{ background:var(--ink); align-items:center; }
.demo-marquee-track{
  display:flex; white-space:nowrap; will-change:transform;
  animation:marqueeScroll 14s linear infinite;
}
.demo-marquee-track span{
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(28px,4vw,46px); color:var(--paper); padding-right:0;
}
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* N05 — responsive reflow */
.demo-responsive{ align-items:center; justify-content:center; background:var(--fog); }
.demo-frame{
  position:relative; width:78%; height:64%; border:2px solid var(--ink);
  border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:12px;
  background:var(--paper);
}
.demo-frame-bar{ display:flex; gap:5px; }
.demo-frame-bar span{ width:6px; height:6px; border-radius:50%; background:var(--slate-line); }
.demo-frame-lines{ display:flex; flex-direction:column; gap:10px; flex:1; justify-content:center; }
.demo-frame-lines span{
  display:block; height:8px; border-radius:4px; background:var(--slate-line);
}
.demo-frame-lines span:nth-child(1){ width:70%; }
.demo-frame-lines span:nth-child(2){ width:100%; }
.demo-frame-lines span:nth-child(3){ width:55%; }

/* N06 — measurable results */
.demo-chart{ flex-direction:column; justify-content:flex-end; padding:22px; gap:16px; background:var(--paper); }
.demo-chart-svg{ width:100%; height:auto; color:var(--ink); flex:1; }
.demo-chart-svg rect{ fill:var(--brass); }
.demo-chart-svg rect:last-child{ fill:var(--ink); }
.demo-chart-stat{ font-size:13.5px; color:var(--ink-70); }
.demo-chart-stat span{
  display:block; font-family:var(--display); font-weight:600; font-style:italic;
  font-size:34px; color:var(--brass); line-height:1;
}

@media (max-width:900px){
  .gallery-grid{ display:flex; flex-direction:column; gap:48px; }
  .gallery-item{ margin-top:0 !important; }
}

/* ==========================================================================
   Services (pinned 3-state crossfade)
   ========================================================================== */
.cottages{ background:var(--fog); position:relative; }
.cottages-pin{
  display:grid; grid-template-columns:1.15fr 1fr;
  min-height:100svh; align-items:stretch;
}
.cottages-media{ position:relative; overflow:hidden; }
.cottage-img{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06);
  transition:opacity 1.1s var(--ease-in-out), transform 1.4s var(--ease-in-out);
}
.cottage-img--a{ opacity:1; transform:scale(1); }

.corrugation{
  position:absolute; left:0; right:0; bottom:0; height:64px;
  background:repeating-linear-gradient(180deg, transparent 0 6px, rgba(140,106,52,.55) 6px 8px);
  -webkit-mask-image:linear-gradient(180deg, transparent, black 70%);
  mask-image:linear-gradient(180deg, transparent, black 70%);
  transform:scaleX(0); transform-origin:left;
}

.cottages-copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:80px clamp(28px,6vw,88px);
}
.cottage-panel{
  display:none;
  animation:panelIn .7s var(--ease-out);
}
.cottage-panel.is-active{ display:block; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.cottage-index{
  display:block; font-family:var(--display); font-style:italic; font-size:30px;
  margin-top:30px; color:var(--ink);
}
.cottage-meta{
  display:block; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-45); margin-top:10px;
}
.cottage-panel p{
  margin-top:22px; font-size:16px; line-height:1.75; color:var(--ink-70);
  max-width:46ch; font-weight:300;
}
.cottage-dots{ display:flex; gap:10px; margin-top:44px; }
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--slate);
  transition:background .3s, transform .3s;
}
.dot.is-active{ background:var(--brass); transform:scale(1.3); }

@media (max-width:860px){
  .cottages-pin{ grid-template-columns:1fr; }
  .cottages-media{ height:52vh; }
  .cottages-copy{ padding:56px var(--gutter); }
}

/* ==========================================================================
   Our Designs — four real directions, proving range rather than a single
   house look. Reuses .demo-tile's frame/hover language so it reads as part
   of the same system as the capability tiles above it.
   ========================================================================== */
.designs{ padding:170px 0 150px; background:var(--fog); }
.designs .section-head{ margin-bottom:70px; }

.designs-grid{
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(2,1fr); gap:40px 32px;
}
.design-card{ display:flex; flex-direction:column; }
.design-frame{
  flex-direction:column; aspect-ratio:16/11; padding:0; clip-path:inset(100% 0 0 0);
}
.design-chrome{ display:flex; gap:5px; padding:12px 14px; flex-shrink:0; }
.design-chrome span{ width:6px; height:6px; border-radius:50%; background:rgba(0,0,0,.15); }
.design-preview{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:8px; padding:20px 26px 34px;
}
/* Only the Restdown card is a real, visitable site, so its tile is wrapped in
   a link. Block-level so the tile keeps its own aspect-ratio and hover lift. */
.design-link{ display:block; }
.design-link:focus-visible{ outline:2px solid var(--brass); outline-offset:5px; }

.design-label{
  margin-top:16px; font-size:13px; color:var(--ink-45); letter-spacing:.01em; line-height:1.5;
}
.design-label-link{ color:var(--brass); border-bottom:1px solid rgba(140,106,52,.4); }
.design-label-link:hover{ border-bottom-color:var(--brass); }
.design-label span{
  display:block; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brass); margin-bottom:6px; font-weight:500;
}

/* Classy — hushed, dark, gold */
.design-frame--classy{ background:linear-gradient(165deg,#211a13,#2c2216); }
.design-frame--classy .design-chrome span{ background:rgba(231,207,156,.25); }
.design-frame--classy .design-preview{ color:#f2e9d8; }
.design-frame--classy .design-eyebrow{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(231,207,156,.65); }
.design-frame--classy h3{
  font-family:var(--display); font-style:italic; font-weight:500; line-height:1.05;
  font-size:clamp(26px,3vw,36px); color:#e7cf9c; margin-top:6px;
}
.design-rule{ width:34px; height:1px; background:#e7cf9c; margin-top:4px; opacity:.7; }

/* Rustic — warm, textured, an actual project (Restdown Cottages) */
.design-frame--rustic{ background-size:cover; background-position:center; position:relative; }
.design-frame--rustic::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,11,.15) 0%, rgba(20,16,11,.65) 100%);
}
.design-frame--rustic .design-chrome span{ background:rgba(246,242,234,.4); position:relative; z-index:1; }
.design-frame--rustic .design-preview{ color:#F6F2EA; justify-content:flex-end; align-items:flex-start; text-align:left; position:relative; z-index:1; }
.design-frame--rustic .design-eyebrow{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(246,242,234,.8); }
.design-frame--rustic h3{
  font-family:var(--display); font-style:italic; font-weight:500; line-height:1; margin-top:6px;
  font-size:clamp(26px,3vw,36px); color:#F6F2EA;
}
.design-frame--rustic h3 em{ color:#c9764f; font-style:italic; }

/* Minimalist — white, black, nothing extra */
.design-frame--minimal{ background:#fff; }
.design-frame--minimal .design-chrome span{ background:#eaeaea; }
.design-frame--minimal .design-preview{ color:#111; align-items:flex-start; text-align:left; gap:10px; }
.design-frame--minimal h3{
  font-family:var(--body); font-weight:300; letter-spacing:.01em; text-transform:uppercase;
  font-size:clamp(24px,2.6vw,32px); line-height:1.15; color:#111;
}
.design-frame--minimal .design-rule{ width:100%; background:#e8e8e8; margin:2px 0; }
.design-frame--minimal .design-eyebrow{ font-size:11px; letter-spacing:.08em; color:#9a9a9a; }

/* Showstopper — bold colour, deliberately unlike the rest of this site */
.design-frame--showstopper{ background:linear-gradient(135deg,#ff5b2e 0%,#ffcb3f 100%); }
.design-frame--showstopper .design-chrome span{ background:rgba(0,0,0,.18); }
.design-frame--showstopper .design-preview{ color:#1a1206; }
.design-frame--showstopper .design-eyebrow{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(26,18,6,.7); }
.design-frame--showstopper h3{
  font-family:var(--body); font-weight:600; letter-spacing:-.01em; line-height:0.95;
  font-size:clamp(32px,4vw,46px); color:#1a1206; margin-top:6px; transform:rotate(-1.5deg);
}

@media (max-width:720px){
  .designs-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Stats (horizontal scroll-jack, reworked as big counters)
   ========================================================================== */
.area{ background:var(--paper); }
.area-pin{ height:100svh; display:flex; flex-direction:column; overflow:hidden; padding-top:120px; }
.area-head{ margin-bottom:56px; flex-shrink:0; }
.area-track{
  display:flex; gap:36px; padding:0 var(--gutter); flex:1; align-items:center;
  will-change:transform;
}
.area-card{
  flex:0 0 auto; width:min(72vw, 380px);
}
.area-time{
  display:block; font-family:var(--display); font-weight:600; font-style:italic;
  font-size:clamp(56px, 7vw, 88px); line-height:1; color:var(--brass);
}
.area-card h3{
  font-family:var(--display); font-weight:400; font-size:22px; margin-top:18px; line-height:1.2;
}
.area-card h3 em{ font-style:italic; color:var(--ink-45); font-size:16px; }
.area-card p{ margin-top:14px; font-size:14.5px; line-height:1.6; color:var(--ink-70); max-width:32ch; font-weight:300; }
.area-card--last{ margin-right:var(--gutter); }

@media (max-width:720px){
  .area-pin{ height:auto; overflow:visible; padding-top:100px; }
  .area-track{ overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:20px; }
  .area-card{ scroll-snap-align:start; }
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing{ padding:170px 0 150px; background:var(--paper); }
.pricing .section-head{ margin-bottom:70px; }

.pricing-grid{
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
}
.price-card{
  border:1px solid var(--slate-line); padding:40px 36px; display:flex; flex-direction:column;
  background:var(--fog);
}
.price-card--standard{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.price-eyebrow{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); font-weight:500;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.sale-tag{
  font-family:var(--body); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:600; color:#1b140a; background:var(--brass); padding:3px 9px; border-radius:100px;
}
.price-amount{
  font-family:var(--display); font-style:italic; font-weight:600; line-height:1;
  font-size:clamp(46px,5vw,64px); margin-top:16px; color:var(--brass);
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
}
.price-was{
  font-size:clamp(22px,2.4vw,28px); color:rgba(245,243,238,.4); text-decoration:line-through;
  font-weight:400; order:-1;
}
.price-amount span{
  display:block; font-family:var(--body); font-style:normal; font-weight:400;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-top:8px;
  color:var(--ink-45);
}
.price-card--standard .price-amount span{ color:rgba(245,243,238,.55); }
.price-amount--quote{ font-size:clamp(32px,3.4vw,42px); }
.price-sub{ margin-top:18px; font-size:16px; line-height:1.6; max-width:38ch; }
.price-card--standard .price-sub{ color:rgba(245,243,238,.85); }
.price-card--custom .price-sub{ color:var(--ink-70); }
.price-list{ margin-top:26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.price-list li{
  font-size:14.5px; line-height:1.5; padding-left:20px; position:relative; font-weight:300;
}
.price-list li::before{
  content:""; position:absolute; left:0; top:8px; width:9px; height:1px; background:var(--brass);
}
.price-card--standard .price-list li{ color:rgba(245,243,238,.85); }
.price-card--custom .price-list li{ color:var(--ink-70); }
.price-card .btn{ margin-top:32px; align-self:flex-start; text-align:center; }
.btn--ghost-light{ border:1px solid var(--ink); color:var(--ink); }
.btn--ghost-light:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }

.pricing-note{
  margin:56px auto 0; padding:0 var(--gutter);
  max-width:calc(70ch + (var(--gutter) * 2));
  font-size:14.5px; line-height:1.7; color:var(--ink-45); font-weight:300;
}

@media (max-width:860px){
  .pricing-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   CTA / Enquire form
   ========================================================================== */
.cta{
  position:relative;
  background:var(--ink); color:var(--paper);
  padding:190px var(--gutter) 130px; text-align:center;
  overflow:hidden;
}
.cta .eyebrow{ color:var(--brass); }
.corrugation--cta{
  top:0; bottom:auto; height:80px; transform-origin:center; opacity:.5;
  background:repeating-linear-gradient(180deg, transparent 0 6px, rgba(140,106,52,.7) 6px 8px);
  -webkit-mask-image:linear-gradient(180deg, black, transparent);
  mask-image:linear-gradient(180deg, black, transparent);
}
.cta-headline{
  font-family:var(--display); font-weight:500;
  font-size:clamp(44px, 7.2vw, 96px); line-height:1.05; letter-spacing:-.01em;
  margin-top:20px;
}
.cta-headline em{ font-style:italic; color:var(--brass); }
.cta-address{
  margin:26px auto 0; font-size:15px; color:rgba(245,243,238,.6); font-weight:300;
  max-width:46ch;
}

.enquire-form{
  max-width:640px; margin:56px auto 0; text-align:left;
  display:flex; flex-direction:column; gap:20px;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-row--full{ display:flex; flex-direction:column; }
.enquire-form label{ display:flex; flex-direction:column; gap:8px; }
.enquire-form span{
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(245,243,238,.55);
}
.enquire-form input,
.enquire-form select,
.enquire-form textarea{
  background:transparent; border:none; border-bottom:1px solid rgba(245,243,238,.3);
  color:var(--paper); font-family:var(--body); font-size:15px; padding:8px 2px;
  transition:border-color .3s var(--ease-out);
  resize:vertical;
}
.enquire-form select{ appearance:none; -webkit-appearance:none; }
.enquire-form select option{ color:var(--ink); }
.enquire-form input:focus,
.enquire-form select:focus,
.enquire-form textarea:focus{ border-bottom-color:var(--brass); outline:none; }
.enquire-form .btn{ align-self:flex-start; margin-top:8px; }

@media (max-width:640px){
  .form-row{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Site chatbot — the real, working version of the N01 capability demo
   ========================================================================== */
.site-chatbot{ position:fixed; right:22px; bottom:22px; z-index:400; }

.chatbot-launcher{
  width:56px; height:56px; border-radius:50%; background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center; position:relative;
  box-shadow:0 14px 30px -12px rgba(30,28,25,.45);
  transition:transform .3s var(--ease-out), background-color .3s;
}
.chatbot-launcher:hover{ transform:translateY(-3px); background:var(--brass-dim); }
.chatbot-launcher-dot{
  position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%;
  background:var(--brass); animation:demoPulse 2.4s ease-out infinite;
}

.chatbot-panel{
  position:absolute; right:0; bottom:72px; width:min(340px, calc(100vw - 44px));
  height:min(440px, calc(100vh - 140px));
  background:var(--ink); color:var(--paper); border-radius:16px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.4);
  opacity:0; transform:translateY(12px) scale(.97); pointer-events:none;
  transform-origin:bottom right;
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.site-chatbot.is-open .chatbot-panel{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.site-chatbot.is-open .chatbot-launcher svg{ display:none; }

.chatbot-panel-head{
  display:flex; align-items:center; gap:10px; padding:16px 16px 14px;
  font-size:12.5px; letter-spacing:.04em; color:rgba(245,243,238,.75);
  border-bottom:1px solid rgba(245,243,238,.12); flex-shrink:0;
}
.chatbot-panel-head span:nth-child(2){ flex:1; }
.chatbot-close{ font-size:20px; line-height:1; color:rgba(245,243,238,.55); padding:2px 4px; }
.chatbot-close:hover{ color:var(--paper); }

.chatbot-messages{
  flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
}
.chatbot-input-row{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-top:1px solid rgba(245,243,238,.12); flex-shrink:0;
}
.chatbot-input-row input{
  flex:1; background:transparent; border:none; color:var(--paper);
  font-family:var(--body); font-size:14px; padding:6px 2px;
}
.chatbot-input-row input:focus{ outline:none; }
.chatbot-input-row input::placeholder{ color:rgba(245,243,238,.4); }
.chatbot-input-row button{
  width:30px; height:30px; border-radius:50%; background:var(--brass); color:#1b140a;
  display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;
  transition:background-color .3s;
}
.chatbot-input-row button:hover{ background:#a67e40; }

@media (max-width:480px){
  .site-chatbot{ right:16px; bottom:16px; }
  .chatbot-launcher{ width:52px; height:52px; }
}

.cta-actions{
  display:flex; gap:18px; justify-content:center; margin-top:48px; flex-wrap:wrap;
}
.btn{
  padding:16px 34px; border-radius:100px; font-size:14px; letter-spacing:.03em;
  transition:transform .35s var(--ease-out), background-color .35s, color .35s, border-color .35s;
  display:inline-block;
}
.btn--primary{ background:var(--brass); color:var(--paper); }
.btn--primary:hover{ background:#a67e40; transform:translateY(-2px); }
.btn--ghost{ border:1px solid rgba(245,243,238,.35); color:var(--paper); }
.btn--ghost:hover{ border-color:var(--paper); transform:translateY(-2px); }
.cta-note{ margin-top:40px; font-size:13px; color:rgba(245,243,238,.5); }
.cta-note a{ color:rgba(245,243,238,.85); border-bottom:1px solid rgba(245,243,238,.35); }
.cta-note a:hover{ color:var(--brass); border-color:var(--brass); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--ink); color:var(--paper); padding:0 var(--gutter) 40px; }
.footer-top{
  display:flex; justify-content:space-between; align-items:center;
  padding:40px 0; border-top:1px solid rgba(245,243,238,.14);
  flex-wrap:wrap; gap:20px;
}
.footer-logo{ font-family:var(--display); font-size:18px; }
.footer-top nav{ display:flex; gap:28px; flex-wrap:wrap; }
.footer-top nav a{ font-size:13px; color:rgba(245,243,238,.65); }
.footer-top nav a:hover{ color:var(--brass); }
.footer-bottom{
  display:flex; justify-content:space-between; font-size:12px;
  color:rgba(245,243,238,.4); flex-wrap:wrap; gap:8px;
}
.footer-social{ color:rgba(245,243,238,.55); transition:color .3s var(--ease-out); }
.footer-social:hover{ color:var(--brass); }
.cta-note--social{ margin-top:14px; }

/* ==========================================================================
   Reveal utility states
   ========================================================================== */
[data-fade-up]{ opacity:0; transform:translateY(28px); }
[data-fade-up].is-in{ opacity:1; transform:translateY(0); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }

@media (prefers-reduced-motion: reduce){
  [data-fade-up]{ opacity:1 !important; transform:none !important; }
  .hero-scroll-cue .line::after{ animation:none; }
}

/* ==========================================================================
   Sub-pages (What happens next, Terms)
   No sale banner on these pages, so the nav sits flush at the top: zero out
   --banner-h rather than special-casing every offset that depends on it.
   ========================================================================== */
.subpage{ --banner-h: 0px; }

.page-head{
  max-width:var(--container); margin:0 auto;
  padding:clamp(140px, 16vh, 200px) var(--gutter) 0;
}
.page-title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(44px, 7.5vw, 92px); line-height:1; letter-spacing:-.015em;
  margin-top:16px;
}
.page-title em{ font-style:italic; color:var(--brass); }
.page-intro{
  margin-top:30px; max-width:60ch;
  font-size:clamp(15px, 1.5vw, 17.5px); line-height:1.65;
  color:var(--ink-70); font-weight:300;
}
.legal-meta{
  margin-top:24px; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-45);
}

/* ---- numbered steps ---------------------------------------------------- */
.steps{
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  padding-top:clamp(70px, 9vh, 110px); list-style:none;
}
.step{
  display:grid; grid-template-columns:minmax(84px, 132px) 1fr; gap:0 40px;
  padding:44px 0; border-top:1px solid var(--slate-line);
}
.step:last-child{ border-bottom:1px solid var(--slate-line); }
.step-num{
  font-family:var(--display); font-size:clamp(38px, 5vw, 62px); line-height:.9;
  color:var(--brass); font-weight:300;
}
.step-body h2{
  font-family:var(--display); font-weight:400; font-size:clamp(24px, 2.9vw, 34px);
  line-height:1.15; letter-spacing:-.005em;
}
.step-body p{
  margin-top:14px; max-width:62ch;
  font-size:15.5px; line-height:1.7; color:var(--ink-70); font-weight:300;
}
.step-body strong{ color:var(--ink); font-weight:500; }

@media (max-width:720px){
  .step{ grid-template-columns:1fr; gap:10px; padding:34px 0; }
  .step-num{ font-size:32px; }
}

/* ---- legal prose ------------------------------------------------------- */
.legal{
  max-width:78ch; margin:0 auto;
  padding:clamp(60px, 8vh, 96px) var(--gutter) 0;
}
.legal h2{
  font-family:var(--display); font-weight:400; font-size:clamp(21px, 2.4vw, 27px);
  line-height:1.2; margin-top:52px;
}
.legal h2:first-of-type{ margin-top:0; }
.legal p{
  margin-top:14px; font-size:15.5px; line-height:1.75; color:var(--ink-70); font-weight:300;
}
.legal ul{
  margin-top:16px; padding-left:0; list-style:none;
}
.legal li{
  position:relative; padding-left:20px; margin-top:11px;
  font-size:15.5px; line-height:1.7; color:var(--ink-70); font-weight:300;
}
.legal li::before{
  content:""; position:absolute; left:2px; top:11px;
  width:5px; height:1px; background:var(--brass);
}
.legal strong{ color:var(--ink); font-weight:500; }
.legal a{ color:var(--brass); border-bottom:1px solid rgba(140,106,52,.4); }
.legal a:hover{ border-bottom-color:var(--brass); }

.legal-todo{
  margin-bottom:44px; padding:18px 20px;
  background:rgba(140,106,52,.08); border-left:2px solid var(--brass);
  font-size:14px; line-height:1.6; color:var(--ink-70);
}
.legal-todo strong{ color:var(--ink); }

/* ---- closing CTA on sub-pages ----------------------------------------- */
.page-cta{
  margin-top:clamp(90px, 12vh, 150px);
  background:var(--ink); color:var(--paper);
  padding:clamp(90px, 12vh, 130px) var(--gutter);
  text-align:center;
}
.page-cta-title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(32px, 5vw, 58px); line-height:1.05;
}
.page-cta-note{
  margin-top:20px; font-size:15px; color:rgba(245,243,238,.6); font-weight:300;
  max-width:46ch; margin-left:auto; margin-right:auto;
}
.page-cta-actions{
  display:flex; gap:16px; justify-content:center; margin-top:40px; flex-wrap:wrap;
}

/* current page marker in the nav */
.nav-links a.is-current{ color:var(--ink); }
.nav-links a.is-current::after{ transform:scaleX(1); transform-origin:left; }