/* ============================================================
   TAILORED FLOORING AND PROPERTY SOLUTIONS
   core.css — tokens, reset, and every component shared sitewide.
   Loaded on every page. Page-specific sections live in pages.css.

   Mobile-first. ONE @media (min-width:900px) block at the bottom,
   ONE @media (prefers-reduced-motion:reduce) block after it.
   Animate transform and opacity only.
   ============================================================ */

/* ------------------------------------------------------------
   0 · TYPEFACES — self-hosted
   The brief specifies the Google Fonts CDN with self-hosting deferred to
   Phase 5. Brought forward, because it is a straight win against the LCP
   gate: the CDN costs a DNS lookup, a TLS handshake and a CSS round trip
   to a second origin BEFORE the font files are even discovered. Same
   bytes, one origin, works offline and from file://.

   Fraunces ships as the variable opsz+wght axis in roman and italic —
   the italic is a separate file because it is a genuinely different
   drawing, and the site sets it at a lighter weight than the roman.
   Latin subset only.
   ------------------------------------------------------------ */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/fraunces-var.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;
  src:url('../fonts/fraunces-var-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-var.woff2') format('woff2');
}
@font-face{
  font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/anton.woff2') format('woff2');
}
@font-face{
  font-family:'Sacramento';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/sacramento.woff2') format('woff2');
}

/* ------------------------------------------------------------
   1 · TOKENS
   ------------------------------------------------------------ */
:root{
  /* Ground */
  --void:   #080706;          /* page base, warm near-black */
  --abyss:  #16120F;          /* raised sections */
  --slate:  #1F1A16;          /* cards, tiles */
  --ember:  #5C3520;          /* deep copper, gradient stops, journey scenes */

  /* Accent 1 — italic headline phrases, links, active states */
  --copper:      #D08A63;
  --copper-soft: #F0C9AF;

  /* Accent 2 — eyebrows, ribbon, secondary CTA, numerals */
  --brass:  #E8C08A;

  /* Accent 3 — primary CTA only */
  --clay:   #C25E3F;

  /* Type */
  --cream:  #F5EFE7;
  --ink:    #14100D;
  --ink-3:  #7C7169;

  /* Text on the dark ground. Body copy is never pure white. */
  --t-hi:   #FFFFFF;
  --t-body: rgba(245,239,231,.68);
  --t-mute: rgba(245,239,231,.5);
  --t-faint:rgba(245,239,231,.35);

  /* Hairlines */
  --line:      rgba(245,239,231,.09);
  --line-warm: rgba(208,138,99,.28);

  --font-d: 'Fraunces', Georgia, serif;
  --font-b: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-p: 'Anton', Impact, sans-serif;      /* poster accent — three places only */
  --font-s: 'Sacramento', cursive;            /* script — twice per page maximum */

  --ease:   cubic-bezier(.22,1,.36,1);
  --ease-o: cubic-bezier(.16,1,.3,1);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --nav-h:  70px;
  --wrap:   1200px;

  /* Copper as brushed metal. Never a flat fill on a large area. */
  --copper-metal: linear-gradient(135deg,#8C5535 0%,#D08A63 22%,#F2C4A6 46%,#D08A63 62%,#9A5B3B 82%,#E9AC8B 100%);
}

/* ------------------------------------------------------------
   2 · RESET AND BASE
   ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-b);
  background:var(--void);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-bottom:calc(70px + var(--safe-b));   /* clears the mobile action bar */
}
img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{border:none;background:none;cursor:pointer;font-family:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
input,textarea,select{font-family:inherit;font-size:inherit}
::selection{background:var(--brass);color:var(--void)}

/* The noise overlay. Not optional — flat near-black reads cheap without it. */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   3 · ACCESSIBILITY PRIMITIVES
   The reference build has none of this. It is the largest single
   gap between it and a site that passes an audit.
   ------------------------------------------------------------ */
.skip{
  position:absolute;left:12px;top:-100px;z-index:1200;
  background:var(--brass);color:var(--void);
  padding:14px 22px;border-radius:0 0 14px 14px;
  font-size:.8rem;font-weight:700;letter-spacing:.06em;
  transition:top .25s var(--ease);
}
.skip:focus{top:0}

:focus-visible{
  outline:2px solid var(--copper-soft);
  outline-offset:3px;
  border-radius:4px;
}
/* Never remove the ring. Only reshape it where the element is round. */
.btn:focus-visible,.pill:focus-visible{outline-offset:4px;border-radius:100px}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ------------------------------------------------------------
   4 · LAYOUT
   ------------------------------------------------------------ */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:26px}
.wrap-narrow{max-width:760px;margin-inline:auto;padding-inline:26px}
.section{padding-block:13svh}
.section-tight{padding-block:9svh}
.raised{background:var(--abyss)}

/* ------------------------------------------------------------
   5 · TYPOGRAPHY
   The whole premium read lives here. Three things are load-bearing
   and easy to lose: negative tracking on display sizes, the italic
   set LIGHTER than the roman, and body copy that never goes bold.
   ------------------------------------------------------------ */
h1,h2,h3,h4{font-family:var(--font-d);font-weight:300;letter-spacing:-.03em;line-height:.96;color:var(--t-hi)}
h1 em,h2 em,h3 em,h4 em{font-style:italic;font-weight:200;color:var(--copper)}

h1{font-size:clamp(3.2rem,13.5vw,8.6rem)}
h2{font-size:clamp(2.3rem,9.5vw,5.2rem);line-height:1.02;letter-spacing:-.02em}
h3{font-size:clamp(1.7rem,6.5vw,2.3rem);font-weight:400;letter-spacing:-.015em;line-height:1.1}
h4{font-size:1.35rem;font-weight:400;line-height:1.2}

.h-sub{font-size:clamp(2rem,8vw,3.8rem);line-height:1.04}

p{font-size:.94rem;font-weight:300;line-height:1.85;color:var(--t-body)}
p.lead{font-size:1.02rem;color:var(--t-body)}
p.small{font-size:.86rem;line-height:1.75}
.measure{max-width:68ch}
.measure-tight{max-width:46ch}

/* Signature eyebrow / chapter label */
.chapter{
  font-size:.62rem;font-weight:700;letter-spacing:.34em;text-transform:uppercase;
  color:var(--brass);display:flex;align-items:center;gap:14px;margin-bottom:24px;
}
.chapter::before{content:'';width:34px;height:1px;background:var(--brass);opacity:.6;flex:none}
.chapter-center{justify-content:center}

.eyebrow{font-size:.62rem;font-weight:700;letter-spacing:.4em;text-transform:uppercase;color:var(--brass)}
.micro{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--t-mute)}

/* Big numerals — an italic Fraunces motif reused across the site */
.numeral{font-family:var(--font-d);font-style:italic;font-weight:200;color:var(--brass);line-height:1}
.numeral-lg{font-size:clamp(2.8rem,11vw,5.4rem);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ghost{
  font-family:var(--font-d);font-style:italic;font-weight:200;
  font-size:clamp(4.4rem,20vw,11rem);color:rgba(255,255,255,.05);
  pointer-events:none;white-space:nowrap;line-height:1;
}

/* Poster face. Permitted in three places only: the hero kicker strip,
   process-step numerals, and badge-adjacent captions. Never a headline. */
.poster{font-family:var(--font-p);font-weight:400;letter-spacing:.02em;line-height:.9;text-transform:uppercase}

/* Script. Warm one-line asides. Maximum twice per page. */
.script{font-family:var(--font-s);font-weight:400;font-size:clamp(1.6rem,6vw,2.4rem);color:var(--copper);line-height:1.2}

a.link{color:var(--copper);border-bottom:1px solid rgba(208,138,99,.35);transition:border-color .25s ease,color .25s ease}
a.link:hover{color:var(--copper-soft);border-bottom-color:var(--copper-soft)}

/* ------------------------------------------------------------
   6 · BUTTONS
   The large soft coloured shadow is doing real work. It reads as
   a bloom under the button, not as a drop shadow. Do not reduce it.
   ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  border-radius:100px;font-weight:600;min-height:58px;padding:17px 38px;
  font-size:.92rem;white-space:nowrap;text-align:center;
  transition:transform .25s var(--ease),box-shadow .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
  will-change:transform;
}
.btn-clay {background:var(--clay);color:#fff;box-shadow:0 16px 46px rgba(194,94,63,.35)}
.btn-clay:hover{box-shadow:0 22px 60px rgba(194,94,63,.5)}
.btn-brass{background:var(--brass);color:var(--void);box-shadow:0 16px 46px rgba(232,192,138,.25)}
.btn-brass:hover{box-shadow:0 22px 60px rgba(232,192,138,.4)}
.btn-line {border:1px solid rgba(245,239,231,.3);color:var(--cream)}
.btn-line:hover{border-color:var(--copper);color:var(--copper)}
.btn-sm{min-height:46px;padding:12px 26px;font-size:.82rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* Inline text CTA with the arrow motif */
.cta-arrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--copper);transition:gap .25s var(--ease),color .25s ease;
}
.cta-arrow::after{content:'→';transition:transform .25s var(--ease)}
.cta-arrow:hover{color:var(--copper-soft)}
.cta-arrow:hover::after{transform:translateX(4px)}

/* ------------------------------------------------------------
   7 · MOTION SYSTEM — split text, reveals, magnetic
   ------------------------------------------------------------ */
/* The horizontal padding is not decorative. Italic Fraunces glyphs lean
   past their advance width — the 'd' of "Tailored" overhangs to the right —
   and overflow:hidden clips them mid-stroke without it. The negative margin
   cancels the padding so the line's metrics are unchanged. */
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding:0 .14em .1em;margin:0 -.14em -.1em}
.split .w i{display:inline-block;font-style:inherit;transform:translateY(115%) rotate(3deg);transition:transform 1s var(--ease-o)}
.split.go .w i{transform:none}

.sr{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.sr.on{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}.d4{transition-delay:.48s}

.magnetic{will-change:transform}

/* Draws its stroke on reveal. Used by ticks and line icons. */
.draw path,.draw circle,.draw line,.draw polyline{
  stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);
  transition:stroke-dashoffset 1.1s var(--ease-o);
}
.draw.on path,.draw.on circle,.draw.on line,.draw.on polyline{stroke-dashoffset:0}

/* ------------------------------------------------------------
   8 · THE GRADED IMAGE SYSTEM
   Source photography is shot navy and warm-daylight; the site is
   near-black and copper. Nothing gets dropped in raw.

   Grading is applied at runtime rather than baked into the files so
   one source serves both the graded treatment and any neutral use.
   ------------------------------------------------------------ */
.img-graded{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:22px;
  border:1px solid var(--line-warm);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  background:var(--slate);
}
.img-graded > img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.82) contrast(1.08) brightness(.86);
}
/* Bias the crop downward. `cover` centres by default, which on an interior
   shot means the frame fills with ceiling and the floor — the product —
   falls out of shot. Use this on any image where the floor is the subject. */
.img-graded.is-floor > img{object-position:50% 82%}
.img-graded.is-floor-mid > img{object-position:50% 68%}
/* copper wash — pulls the navy in the sources toward the palette */
.img-graded::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--copper);opacity:.16;mix-blend-mode:soft-light;
}
/* tonal ramp — seats the image into the near-black ground */
.img-graded::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,7,6,.45) 0%,rgba(8,7,6,.12) 40%,rgba(8,7,6,.88) 100%);
}
/* Hero variant — adds a vignette so headline text always clears AA. */
.img-graded.is-hero::after{
  background:
    radial-gradient(120% 90% at 50% 42%,transparent 34%,rgba(8,7,6,.72) 100%),
    linear-gradient(180deg,rgba(8,7,6,.58) 0%,rgba(8,7,6,.2) 38%,rgba(8,7,6,.94) 100%);
}
/* Square/flat variants for tiles and thumbnails */
.img-graded.is-flat{border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.img-graded.is-plain::before,.img-graded.is-plain::after{display:none}
.img-graded.is-plain > img{filter:none}

/* Text sitting on top of a graded image. Must be POSITIONED — z-index has
   no effect on a static grid item, so a plain div would paint under the
   ::after ramp. */
.img-graded.has-overlay{display:grid}
.img-graded.has-overlay > img{grid-area:1/1}
.img-overlay{
  grid-area:1/1;position:relative;z-index:3;
  align-self:end;padding:clamp(20px,4vw,38px);
}

figure{margin:0}
figcaption{margin-top:14px;font-size:.78rem;font-weight:300;line-height:1.65;color:var(--t-mute)}

/* ------------------------------------------------------------
   9 · CARDS, PANELS, HONESTY BLOCKS
   ------------------------------------------------------------ */
.card{
  border:1px solid var(--line);border-radius:26px;
  padding:30px 26px;background:rgba(255,255,255,.03);
}
.card h4,.card h3{color:var(--t-hi)}
.card p{margin-top:10px;font-size:.86rem;line-height:1.75}

/* Stated plainly, not as legal cover. */
.fine{
  margin-top:36px;border:1px solid var(--line);border-radius:18px;
  padding:18px 20px;font-size:.72rem;font-weight:300;
  color:var(--t-mute);line-height:1.75;max-width:640px;
}
.fine b{color:rgba(245,239,231,.8);font-weight:600}

.hairline{height:1px;background:var(--line);border:none}
.hairline-warm{height:1px;border:none;background:var(--copper-metal);opacity:.5}

/* The four stickers are a signature motif. */
.badge{
  width:clamp(96px,26vw,150px);height:auto;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.55));
  transition:transform .5s var(--ease);
  will-change:transform;
}
.badge:hover{transform:rotate(0deg) translateY(-6px) scale(1.03)}
.trust-icon{width:clamp(52px,13vw,66px);height:auto}

/* ------------------------------------------------------------
   10 · PRELOADER
   ------------------------------------------------------------ */
#loader{
  position:fixed;inset:0;z-index:1000;background:var(--void);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .7s ease,visibility .7s;
}
#loader.done{opacity:0;visibility:hidden}
#loader .l-mark{
  font-family:var(--font-d);font-weight:300;font-size:clamp(1.6rem,6vw,2.4rem);
  letter-spacing:.34em;text-indent:.34em;color:var(--cream);overflow:hidden;
}
#loader .l-mark span{display:inline-block;animation:lrise 1.1s var(--ease-o) both}
#loader .l-sub{font-size:.6rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--copper);opacity:.75;text-align:center;padding-inline:20px}
#loader .l-line{width:min(200px,50vw);height:1px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
#loader .l-line i{position:absolute;inset:0;background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform .2s linear}
#loader .l-count{font-family:var(--font-d);font-style:italic;font-weight:200;font-size:1rem;color:var(--t-faint);font-variant-numeric:tabular-nums}
@keyframes lrise{from{transform:translateY(110%)}to{transform:translateY(0)}}

/* ------------------------------------------------------------
   11 · CURSOR
   Three things beyond a ring that follows a dot:

   · SPRING, not lerp. A stiffness/damping spring overshoots very
     slightly and settles, which reads as weight. A linear lerp reads
     as lag.
   · SQUASH AND STRETCH. The ring elongates along its direction of
     travel and thins across it, in proportion to speed. It is the
     oldest trick in animation and it is what makes the thing feel
     like an object rather than a div.
   · STICKY SNAP. Over a button, tile or link the ring stops chasing
     the pointer, morphs to that element's rounded box and parks on
     it. Leaving releases it.

   The dot sits in mix-blend-mode:difference so it inverts against
   whatever is underneath — which matters here, because the page
   flips to a cream ground at the Tailored Promise.
   ------------------------------------------------------------ */
#cursor,#cursor-dot,#cursor-label{position:fixed;top:0;left:0;pointer-events:none;display:none;z-index:900}
#cursor{
  width:42px;height:42px;border-radius:50%;
  border:1.4px solid rgba(208,138,99,.75);
  will-change:transform,width,height,border-radius;
  transition:width .38s var(--ease),height .38s var(--ease),
             border-radius .38s var(--ease),border-color .3s ease,
             background .3s ease,opacity .3s ease;
}
#cursor.snap{
  border-color:var(--copper);
  background:rgba(208,138,99,.13);
  backdrop-filter:blur(1.5px);
}
#cursor.press{background:rgba(208,138,99,.3)}
#cursor-dot{
  width:7px;height:7px;border-radius:50%;background:#fff;
  mix-blend-mode:difference;z-index:901;
  transition:opacity .25s ease,transform .18s var(--ease);
}
#cursor-dot.hide{opacity:0}
#cursor-label{
  z-index:902;
  font-size:.56rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--void);background:var(--brass);padding:6px 11px;border-radius:100px;
  opacity:0;transition:opacity .22s ease;white-space:nowrap;
}
#cursor-label.on{opacity:1}

/* Only on a real pointer, only once it has moved, and never for someone
   who has asked for less motion. */
@media (pointer:fine){
  html.has-cursor #cursor,
  html.has-cursor #cursor-dot,
  html.has-cursor #cursor-label{display:block}
  html.has-cursor,html.has-cursor a,html.has-cursor button,
  html.has-cursor input,html.has-cursor label,html.has-cursor [role="tab"]{cursor:none}
}

/* ------------------------------------------------------------
   12 · NAV, PROGRESS, DRAWER
   ------------------------------------------------------------ */
#progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:701;background:transparent;pointer-events:none}
#progress i{display:block;height:100%;background:var(--copper);transform:scaleX(0);transform-origin:left}

#nav{
  position:fixed;top:0;left:0;right:0;z-index:700;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:24px;
  transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease,
             transform .45s var(--ease);
  border-bottom:1px solid transparent;
  will-change:transform;
}
/* Out of the way on the way down, back the moment you head up. Applies at
   every width now, not only on a phone: the banner is the least interesting
   thing on the page while you are reading. */
.hdr-hide #nav{transform:translateY(-115%)}
.hdr-hide #progress{transform:translateY(-100%)}
#progress{transition:transform .45s var(--ease)}
.drawer-open #nav{transform:none!important}
#nav.scrolled{background:rgba(8,7,6,.7);backdrop-filter:blur(18px);border-bottom-color:var(--line)}

.logo{display:flex;align-items:center;gap:13px;z-index:2;color:var(--t-hi)}
/* The mark is wider than it is tall and carries fine internal detail, so
   at 34px the letterforms mudded together. Sized by height, given room,
   and lifted off the blurred nav behind it. */
.logo img,.logo svg{height:38px;width:auto;flex:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}
.logo b{font-family:var(--font-d);font-weight:400;font-size:1.15rem;letter-spacing:.01em;white-space:nowrap}
.logo small{display:none}

.nav-right{display:flex;align-items:center;gap:20px}
.nav-links{display:none;gap:26px}
.nav-links a{font-size:.8rem;font-weight:500;color:var(--t-body);transition:color .25s ease}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--copper)}
.nav-status{display:none;font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--t-faint);white-space:nowrap}
.nav-status .open{color:var(--copper)}
.nav-cta{
  display:none;border:1px solid rgba(232,192,138,.5);color:var(--brass);
  border-radius:100px;padding:12px 26px;
  font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.nav-cta:hover{background:var(--brass);color:var(--void)}

#burger{width:46px;height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;z-index:2}
#burger span{width:24px;height:1.5px;background:#fff;transition:transform .4s var(--ease),opacity .3s ease}
#burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
#burger.open span:nth-child(2){opacity:0}
#burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ------------------------------------------------------------
   THE DRAWER
   A full-screen menu rather than a dropdown, because on a site this
   size the menu is a destination in its own right.

   Three things carry it:
   · Each line is masked and rises in on a stagger, so the menu
     assembles rather than appearing.
   · Hovering a line cross-fades a graded photograph in behind the
     whole menu. It turns a list of words into a look at the work,
     and it is the single move that makes this feel considered.
   · A copper rule wipes across the line you are on.
   ------------------------------------------------------------ */
#drawer{
  position:fixed;inset:0;z-index:600;
  background:var(--void);
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease);
  overflow-y:auto;overscroll-behavior:contain;
}
#drawer.open{opacity:1;pointer-events:auto}

/* the photograph layer */
.dr-media{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.dr-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 70%;
  opacity:0;transform:scale(1.08);
  transition:opacity .7s var(--ease),transform 1.4s var(--ease);
  filter:saturate(.7) contrast(1.05) brightness(.42);
}
.dr-media img.on{opacity:1;transform:scale(1)}
.dr-media::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(90% 70% at 20% 40%,rgba(8,7,6,.72),rgba(8,7,6,.94) 70%),
             linear-gradient(180deg,rgba(8,7,6,.9),rgba(8,7,6,.7) 40%,rgba(8,7,6,.96));
}
.dr-glow{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 45% at 78% 88%,rgba(140,85,53,.34),transparent 70%);
}

.dr-inner{
  position:relative;z-index:2;
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 30px) 26px 34px;
  max-width:var(--wrap);width:100%;margin-inline:auto;
}
.dr-eyebrow{margin-bottom:22px;opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease) .1s,transform .5s var(--ease) .1s}
#drawer.open .dr-eyebrow{opacity:1;transform:none}

.dr-nav{display:flex;flex-direction:column}
.dr-link{
  position:relative;display:flex;align-items:baseline;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--line);
  overflow:hidden;
}
.dr-link .dr-t{
  font-family:var(--font-d);font-weight:300;letter-spacing:-.025em;
  font-size:clamp(2rem,9vw,3.6rem);line-height:1.06;color:var(--cream);
  flex:1;display:block;
  transform:translateY(110%);
  transition:transform .8s var(--ease-o),color .3s ease;
}
.dr-link .dr-i{
  font-family:var(--font-d);font-style:italic;font-weight:200;
  font-size:.8rem;color:var(--brass);flex:none;align-self:flex-end;
  opacity:0;transition:opacity .5s ease;
}
#drawer.open .dr-link .dr-t{transform:none}
#drawer.open .dr-link .dr-i{opacity:.85}

/* the copper rule that wipes across the active line */
.dr-link::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--copper);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.dr-link:hover::after,.dr-link:focus-visible::after,.dr-link.hot::after{transform:scaleX(1)}
.dr-link:hover .dr-t,.dr-link:focus-visible .dr-t,.dr-link.hot .dr-t{color:var(--copper-soft)}
.dr-link:focus-visible{outline:none}
.dr-link:focus-visible .dr-t{text-decoration:underline;text-underline-offset:8px}

/* per-line stagger on open */
#drawer .dr-link:nth-child(1) .dr-t{transition-delay:.06s}
#drawer .dr-link:nth-child(2) .dr-t{transition-delay:.12s}
#drawer .dr-link:nth-child(3) .dr-t{transition-delay:.18s}
#drawer .dr-link:nth-child(4) .dr-t{transition-delay:.24s}
#drawer .dr-link:nth-child(5) .dr-t{transition-delay:.30s}
#drawer .dr-link:nth-child(6) .dr-t{transition-delay:.36s}
#drawer .dr-link:nth-child(n+1) .dr-i{transition-delay:.42s}

.dr-foot{
  margin-top:38px;display:grid;gap:20px;
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease) .46s,transform .6s var(--ease) .46s;
}
#drawer.open .dr-foot{opacity:1;transform:none}
.dr-cta{display:flex;flex-wrap:wrap;gap:11px}
.dr-contact{display:grid;gap:7px;font-size:.86rem;color:var(--t-mute)}
.dr-contact a{transition:color .25s ease}
.dr-contact a:hover{color:var(--copper)}
.dr-contact b{font-family:var(--font-d);font-weight:400;font-size:1.35rem;color:var(--t-hi);display:block}
.dr-tag{font-family:var(--font-s);font-size:1.6rem;color:var(--copper)}

@media (min-width:900px){
  .dr-inner{padding:calc(var(--nav-h) + 40px) 38px 44px}
  .dr-link{padding:19px 0}
  .dr-link .dr-t{font-size:clamp(2.6rem,5vw,4.4rem)}
  .dr-link .dr-i{font-size:.9rem}
  .dr-nav{max-width:60%}
  .dr-foot{grid-template-columns:auto 1fr auto;align-items:end;gap:34px;max-width:none}
  .dr-media img{object-position:60% 60%}
  /* Let the photograph actually read on the right, where there is no type
     over it, while keeping the left column dark enough for the menu. */
  .dr-media::after{
    background:linear-gradient(90deg,rgba(8,7,6,.96) 12%,rgba(8,7,6,.78) 45%,rgba(8,7,6,.3) 100%),
               linear-gradient(180deg,rgba(8,7,6,.7),transparent 30%,rgba(8,7,6,.75));
  }
  .dr-media img{filter:saturate(.78) contrast(1.05) brightness(.6)}
}

/* the burger becomes the close */
#burger{
  width:52px;height:52px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;z-index:2;border-radius:50%;
  border:1px solid transparent;transition:border-color .35s ease,background .35s ease}
#burger:hover{border-color:var(--line-warm)}
#burger.open{border-color:var(--copper);background:rgba(208,138,99,.1)}
#burger span{width:24px;height:1.5px;background:#fff;
  transition:transform .45s var(--ease),opacity .25s ease,width .35s var(--ease)}
#burger:hover span:nth-child(1){width:18px}
#burger:hover span:nth-child(3){width:18px}
#burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);width:24px}
#burger.open span:nth-child(2){opacity:0}
#burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);width:24px}

/* ------------------------------------------------------------
   13 · FOOTER + MOBILE ACTION BAR
   ------------------------------------------------------------ */
footer{border-top:1px solid var(--line);padding:56px 26px calc(34px + var(--safe-b))}
.foot-grid{display:grid;grid-template-columns:1fr;gap:34px;max-width:var(--wrap);margin-inline:auto}
.foot-col h2,.foot-col h3,.foot-col h4{font-family:var(--font-d);font-weight:400;font-size:1.1rem;color:var(--t-hi);margin-bottom:14px}
.foot-col ul{list-style:none;display:grid;gap:9px}
.foot-col a,.foot-col li{font-size:.84rem;font-weight:300;color:var(--t-mute);line-height:1.6}
.foot-col a{transition:color .25s ease}
.foot-col a:hover{color:var(--copper)}
.foot-base{
  max-width:var(--wrap);margin:40px auto 0;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:space-between;
  font-size:.72rem;font-weight:300;color:var(--t-faint);line-height:1.9;
}
.foot-base a{color:var(--t-mute)}
.foot-base a:hover{color:var(--copper)}
/* Unresolved placeholders must read as obviously unfinished. */
.todo{color:var(--clay);font-weight:600;letter-spacing:.02em}

#actionbar{
  position:fixed;bottom:0;left:0;right:0;z-index:500;
  background:rgba(8,7,6,.92);backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
  display:flex;gap:9px;padding:10px 14px calc(10px + var(--safe-b));
}
#actionbar .btn{flex:1;min-height:48px;padding:10px 8px;font-size:.82rem}
#actionbar .ab-call{flex:.62;background:rgba(255,255,255,.07);color:var(--cream);border:1px solid rgba(255,255,255,.12);box-shadow:none}

/* ------------------------------------------------------------
   14 · MODAL / BOTTOM SHEET SHELL
   Behaviour beyond the reference: focus trap, Esc to close, focus
   returned to the opener, scroll position preserved on close.
   ------------------------------------------------------------ */
.modal{
  position:fixed;inset:0;z-index:850;
  background:rgba(8,7,6,.8);backdrop-filter:blur(10px);
  display:none;align-items:flex-end;justify-content:center;
}
.modal.open{display:flex}
.sheet{
  background:var(--cream);color:var(--ink);
  width:100%;max-width:600px;border-radius:30px 30px 0 0;
  max-height:88svh;overflow-y:auto;
  padding:26px 24px calc(30px + var(--safe-b));
  animation:sheetup .5s var(--ease);
}
@keyframes sheetup{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.sheet-head b{font-family:var(--font-d);font-weight:400;font-size:1.4rem;letter-spacing:-.01em}
.sheet-close{
  width:42px;height:42px;border-radius:50%;background:#E7DFD2;color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:1rem;flex:none;
  transition:background .25s ease;
}
.sheet-close:hover{background:#DBD1C0}
.sheet-close:focus-visible{outline-color:var(--ember)}

/* Body-scroll lock. Position is captured in JS and restored on close. */
body.locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* ------------------------------------------------------------
   15 · DESKTOP — the single min-width block
   ------------------------------------------------------------ */
@media (min-width:900px){
  body{padding-bottom:0}
  #actionbar{display:none}
  /* The menu is a feature in its own right now, not a small-screen
     fallback, so desktop keeps it alongside the inline links. */
  .nav-links{display:flex}
  .nav-status{display:block}
  .nav-cta{display:inline-flex}
  .logo small{
    display:block;font-size:.55rem;font-weight:700;letter-spacing:.22em;
    text-transform:uppercase;color:var(--t-faint);margin-top:3px;
  }
  .logo b{font-size:1.2rem}
  #nav{padding-inline:38px;height:78px}
  :root{--nav-h:78px}
  .wrap,.wrap-narrow{padding-inline:38px}
  .section{padding-block:15svh}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
  .modal{align-items:center}
  .sheet{border-radius:30px;max-height:86svh}
  p{font-size:.96rem}
}

/* ------------------------------------------------------------
   15b · SCROLL FEEL
   Snap scrolling was tried here and removed. `proximity` snapping
   fights a page whose sections are all different heights: it keeps
   re-deciding which point is nearest while the momentum is still
   running, and the result reads as a stutter rather than as a
   settle. `mandatory` is worse, because it also traps anyone inside
   a section taller than the screen.

   Native momentum scrolling is already silk. The job is to not get
   in its way, so what is left here is only the things that stop the
   browser doing extra work per frame.
   ------------------------------------------------------------ */
html{
  scroll-behavior:smooth;                  /* anchor jumps only */
  scroll-padding-top:calc(var(--nav-h) + 12px);
  overscroll-behavior-y:auto;
}

/* Isolate the big sections so a repaint inside one cannot invalidate
   the whole page. `paint` containment is the cheap half of the win and
   is safe with sticky children, unlike `content-visibility`, which
   changes intrinsic height and would break the pinned scenes. */
#journey,#halves,#trust,#promise,#numbers,#reviews,#visit,#gallery-teaser{
  contain:paint;
}

/* The nav is a fixed, blurred layer sitting over everything that moves,
   so its backdrop is recomposited on every frame of every scroll. A
   heavy blur there is the most expensive thing on the page on a phone
   for the least visible gain, so mobile gets a lighter one. */
@media (max-width:899px){
  #nav.scrolled{backdrop-filter:blur(8px);background:rgba(8,7,6,.86)}
}

/* ------------------------------------------------------------
   16 · REDUCED MOTION
   The reference only shortens durations, which is not honouring the
   preference. Here the transforms resolve to their end state and JS
   branches separately (see prefersReducedMotion in core.js): the
   canvas, the floor scene and every scroll-linked effect are skipped,
   not merely sped up.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .sr{opacity:1;transform:none}
  .split .w i{transform:none}
  .split .w{overflow:visible}
  .draw path,.draw circle,.draw line,.draw polyline{stroke-dashoffset:0}
  .badge{transform:none!important}
  #cursor,#cursor-dot,#cursor-label{display:none!important}
  #loader{display:none}
}

/* ------------------------------------------------------------
   17 · PRINT
   Someone printing a quote page or a product spec wants the facts on
   paper, not a near-black background and a scroll-progress rule.
   ------------------------------------------------------------ */
@media print{
  :root{--t-hi:#000;--t-body:#222;--t-mute:#444;--t-faint:#666;--line:#ccc;--line-warm:#bbb}
  body{background:#fff;color:#000;padding:0}
  body::after,#loader,#cursor,#cursor-dot,#cursor-label,#progress,#nav,#drawer,
  #actionbar,#tray,#pd-bar,.modal,#lightbox,.skip,.pills,.refine,.badge,
  #ribbon,#hero-glow,#hero-floor,#stars,#fcanvas,.f-veil,.r-ring{display:none!important}
  h1,h2,h3,h4{color:#000;page-break-after:avoid}
  h1 em,h2 em,h3 em,h4 em{color:#7A4526}
  p,li,td,th{color:#222}
  a{color:#000;text-decoration:underline}
  /* a printed page has no hover, so surface the destination */
  a[href^="http"]::after,a[href$=".html"]::after{content:" (" attr(href) ")";font-size:.72em;color:#666}
  .sr,.split .w i{opacity:1!important;transform:none!important}
  .img-graded{border:1px solid #ccc;box-shadow:none;break-inside:avoid}
  .img-graded > img{filter:none}
  .img-graded::before,.img-graded::after{display:none}
  .card,.fine,.calc,.contact-card{border:1px solid #ccc;background:#fff;break-inside:avoid}
  .spec th,.spec td{border-bottom:1px solid #ddd}
  section{padding-block:14pt!important;break-inside:avoid}
  #promise{background:#fff}
  footer{border-top:1px solid #ccc}
  .foot-base::after{content:"tfpsolutions.com.au · 0406 127 797 · tailoredfc@gmail.com";
    display:block;width:100%;margin-top:8pt;font-weight:600;color:#000}
}