/* Clearwater Dental — built in the motion-kit Cobalt pack (Swiss-modernist, photography-first).
   A white page and one cobalt that opens the site (the intro curtain, the monogram assembling block by block) and
   closes it (the footer room); one grotesk at weight 400 with hierarchy from size and tracking alone; a one-word
   wordmark fitted to the full width that the hero photo slides up over; 9px square dot labels; a grey menu pill
   that turns cobalt; a sticky gallery whose image grows between four words; hairline rows for prices and the visit.
   Below: self-hosted fonts, cobalt.css verbatim (minus the Google Fonts import), then this page's layer. */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;src:url("../../fonts/examples/inter-tight-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500;font-display:swap;src:url("../../fonts/examples/inter-tight-500-normal.woff2") format("woff2")}

/* Cobalt style pack — tokens, type, grid and components.
   Design category: Swiss-modernist architectural (custom builders, developers, architecture & interiors studios).
   Reconstructed design language (a Melbourne luxury home builder, studied October 2026). Original code; no assets from the source site.
   Concept in one line: one cobalt ink, one grotesk at one weight, a white page cut by hairlines, and a wordmark as wide as the screen. */


:root {
  /* Palette. Two colours do all the work: cobalt and white. Everything else is a neutral. */
  --cobalt: #0c388d;        /* brand ink: wordmark, intro curtain, footer */
  --cobalt-2: #0d3b96;      /* menu panel: one step brighter so it reads above the cobalt wordmark */
  --white: #fff;            /* the page */
  --ink: #252320;           /* warm near-black text. Never pure black on white. */
  --ink-2: #4b4b4b;         /* secondary text */
  --muted: #7b7b7b;         /* tertiary: years, counters, captions */
  --pill: #f6f6f6;          /* the closed menu pill */
  --line: #dcdcdf;          /* hairlines between rows and under section titles */
  --stone: #f0efe9;         /* image placeholders / loading grounds */
  --err: #fb5607;

  /* Font. Licensed original: Suisse Int'l (Swiss Typefaces), weight 400 only. Free stand-in: Inter Tight. */
  --f: "Inter Tight", "Suisse Int'l", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Fluid type steps (utopia-style, 320 → 1920px). The source only ever uses weight 400. */
  --step--1: clamp(.75rem, .784rem - .028vw, .778rem);            /* 12px: legal, meta */
  --step-0: clamp(.875rem, .861rem + .062vw, .938rem);            /* 14–15px: small text, labels, captions */
  --step-1: clamp(.984rem, .941rem + .186vw, 1.172rem);           /* 16–19px: body, nav, buttons */
  --step-4: clamp(1.402rem, 1.196rem + .882vw, 2.289rem);         /* 22–37px: card titles */
  --step-6: clamp(1.774rem, 1.355rem + 1.791vw, 3.576rem);        /* 28–57px: section titles, quotes, gallery words */
  --step-8: clamp(2.245rem, 1.469rem + 3.322vw, 5.588rem);        /* 36–89px: statements */

  /* Space (utopia pairs). */
  --space-2xs: clamp(.438rem, .423rem + .062vw, .5rem);
  --space-xs: clamp(.563rem, .548rem + .062vw, .625rem);
  --space-s: clamp(.875rem, .861rem + .062vw, .938rem);
  --space-m: clamp(1.313rem, 1.284rem + .124vw, 1.438rem);
  --space-l: clamp(1.75rem, 1.721rem + .124vw, 1.875rem);
  --space-xl: clamp(2.625rem, 2.581rem + .186vw, 2.813rem);
  --space-2xl: clamp(3.5rem, 3.442rem + .248vw, 3.75rem);
  --space-section: clamp(5.25rem, 4.51rem + 3.168vw, 8.438rem);   /* 84–135px between components */
  --gutter: clamp(.875rem, .207rem + 2.857vw, 3.75rem);           /* page inset: 14–60px (44px at 1440) */
  --col-gap: var(--space-m);
  --max: 1920px;

  /* Motion. --e-smooth is the signature: a fast start that glides for a full second. */
  --e-smooth: cubic-bezier(.14, .9, .34, .94);
  --e-out: cubic-bezier(.19, 1, .22, 1);          /* expo-out: menu, panels, logo */
  --e-inout: cubic-bezier(.4, 0, .2, 1);          /* menu height, small state changes */
  --e-el: cubic-bezier(.65, 0, 0, 1);             /* hard in-out: menu rows, slides, wipes */
  --e-in: cubic-bezier(.78, 0, .61, .01);         /* leaving */
  --e-bounce: cubic-bezier(.32, 1.51, .36, .97);  /* tiny pops only */
  --d-quick: .2s; --d-base: .35s; --d-btn: .3s; --d-slow: .7s; --d-smooth: 1s;
  --stagger: .05s;                                /* --delay-multiplier in the source */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font: 400 var(--step-1)/1.5 var(--f); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
::selection { background: var(--cobalt); color: var(--white); }

/* ---------- Type. One family, weight 400; size and space do the hierarchy. ---------- */
.t-xs { font-size: var(--step--1); line-height: 1.4; }
.t-s { font-size: var(--step-0); line-height: 1.5; }
.t-m { font-size: var(--step-1); line-height: 1.5; }
.t-card { font-size: var(--step-4); line-height: 1.15; letter-spacing: -.03em; }
.h2 { font-size: var(--step-6); line-height: 1.2; letter-spacing: -.04em; font-weight: 400; }
.h1 { font-size: var(--step-8); line-height: 1.05; letter-spacing: -.045em; font-weight: 400; }
.caps { text-transform: uppercase; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.measure { max-width: 34em; }
.flow > * + * { margin-top: var(--space-m); }

/* The wordmark: one word set to exactly the width of the page (Cobalt.fit). Tight tracking, line-height trimmed to the letters. */
.wordmark { display: block; font-weight: 400; letter-spacing: -.055em; line-height: .76; white-space: nowrap; font-size: 22vw; color: var(--cobalt); padding-top: .04em; }

/* Dot heading: a 9px square bullet before a small label. The brand's only ornament. */
.dot { display: inline-flex; align-items: baseline; gap: .7em; }
.dot::before { content: ""; flex: none; width: 9px; height: 9px; background: currentColor; transform: translateY(-.05em); }
.dot--brand::before { background: var(--cobalt); }

/* ---------- Grid ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.section { padding-block: var(--space-section); }
@media (max-width: 767px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Section intro: big title, hairline, then label (cols 1–4) | body (cols 6–10). */
.intro-title { padding-bottom: var(--space-m); border-bottom: 1px solid var(--line); margin-bottom: var(--space-l); }
.intro-label { grid-column: 1 / 5; }
.intro-body { grid-column: 6 / 11; }
@media (max-width: 767px) { .intro-label, .intro-body { grid-column: 1 / -1; } .intro-body { margin-top: var(--space-l); } }

/* ---------- Link: 1px underline that retracts right, then redraws from the left ---------- */
.link { position: relative; display: inline-block; padding-bottom: 5px; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform .6s var(--e-out); }
.link:hover::after, .link:focus-visible::after { transform: scaleX(0); transform-origin: right; }
.arrow-tr { display: inline-block; width: .7em; height: .7em; margin-left: .25em; vertical-align: -.02em; transition: transform var(--d-btn) var(--e-out); }
a:hover .arrow-tr { transform: translate(2px, -2px); }

/* ---------- Header: mark left, menu pill centre, contact right ---------- */
.header { position: fixed; inset: 0 0 auto; z-index: 40; padding: var(--space-l) var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; pointer-events: none; }
.header > * { pointer-events: auto; }
.header .contact { justify-self: end; font-size: var(--step-0); padding-top: 8px; transition: color .4s var(--e-out); }
.mark { width: 36px; height: 36px; color: var(--cobalt); transition: color .4s var(--e-out); }
.mark rect { fill: currentColor; }
.header.on-dark .mark, .header.on-dark .contact { color: var(--white); }
.header > a { transition: opacity .4s var(--e-out); }
@media (max-width: 600px) {
  .header { grid-template-columns: auto 1fr; column-gap: var(--space-s); }
  .header .contact { display: none; }
  .header .menu { width: auto; justify-self: stretch; }
}
.header.over-footer > a { opacity: 0; pointer-events: none; }

/* Menu: a grey pill that becomes a cobalt panel. Height opens with grid-template-rows 0fr → 1fr. */
.menu { width: min(420px, calc(100vw - 2 * var(--gutter) - 150px)); background: var(--pill); color: var(--ink); transition: background-color 1s var(--e-out), color 1s var(--e-out); }
.menu-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; font-size: var(--step-0); }
.burger { position: relative; width: 60px; height: 9px; }
.burger i { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .45s var(--e-out), top .45s var(--e-out); }
.burger i:first-child { top: 0; } .burger i:last-child { top: 8px; }
.menu-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--e-inout); }
.menu-body > div { overflow: hidden; }
.menu-list { list-style: none; padding: 0 20px; }
.menu-list li { overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.menu-list a { display: flex; align-items: center; gap: .6em; padding: 20px 0 16px; font-size: var(--step-1); transform: translateY(105%); transition: transform .6s var(--e-el); }
.menu-list a[aria-current]::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.menu-foot { padding: 18px 20px 22px; font-size: var(--step-0); display: grid; gap: 4px; opacity: 0; transition: opacity .5s var(--e-out); }
.menu.open { background: var(--cobalt-2); color: var(--white); }
.menu.open .burger i:first-child { top: 4px; transform: rotate(8deg); }
.menu.open .burger i:last-child { top: 4px; transform: rotate(-8deg); }
.menu.open .menu-body { grid-template-rows: 1fr; }
.menu.open .menu-list a { transform: none; transition-delay: calc(.12s + var(--i, 0) * var(--stagger)); }
.menu.open .menu-foot { opacity: 1; transition-delay: .35s; }

/* ---------- Intro: cobalt curtain, block mark assembles, curtain lifts ---------- */
.curtain { position: fixed; inset: 0; z-index: 100; background: var(--cobalt); display: grid; place-items: center; }
.curtain .mark { width: 44px; height: 44px; color: var(--white); }
.curtain .mark rect { opacity: 0; }

/* ---------- Hero: dot line top-right, the wordmark, meta row, then a photo that slides over the wordmark ---------- */
.hero { padding-top: clamp(140px, 30vh, 380px); }
.hero-lede { grid-column: 9 / 13; font-size: var(--step-0); margin-bottom: var(--space-m); }
.hero-meta { display: flex; justify-content: space-between; font-size: var(--step-0); text-transform: uppercase; padding-block: var(--space-2xs) var(--space-l); }
.hero-media { position: relative; z-index: 2; height: 100vh; margin-inline: calc(var(--gutter) / 2); overflow: hidden; }
@media (max-width: 767px) { .hero-lede { grid-column: 1 / -1; } }

/* ---------- Scroll gallery: four compass words around a centred image that grows (never over the words) ---------- */
.sgallery { position: relative; height: 220vh; }
.sgallery-inner { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.sgallery-frame { position: relative; width: 100vw; height: 100vh; transform: scale(var(--s, .56)); clip-path: inset(var(--ci, 8%) var(--cx, 20%)); will-change: transform, clip-path; }
.sgallery-frame figure { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--e-el); }
.sgallery-frame figure.on, .sgallery-frame figure:first-child { clip-path: inset(0); }
.sgallery-words { position: absolute; inset: 0; z-index: 2; pointer-events: none; padding: calc(var(--space-l) + 52px) var(--gutter) var(--space-l); display: grid; grid-template: auto 1fr auto / 1fr 1fr; color: var(--ink); }
.sgallery-words > * { will-change: transform; }
.sgallery-words .w-top { grid-column: 1 / -1; justify-self: center; font-size: var(--step-0); text-transform: uppercase; transform: translateY(var(--o, 0)); }
.sgallery-words .w-left { align-self: center; font-size: var(--step-6); letter-spacing: -.04em; transform: translateX(var(--o, 0)); }
.sgallery-words .w-right { align-self: center; justify-self: end; font-size: var(--step-6); letter-spacing: -.04em; transform: translateX(calc(var(--o, 0) * -1)); }
.sgallery-words .w-bottom { grid-column: 1 / -1; justify-self: center; font-size: var(--step-0); text-transform: uppercase; transform: translateY(calc(var(--o, 0) * -1)); }

/* ---------- Media frames ---------- */
.media { position: relative; overflow: hidden; background: var(--stone); }
.media > .ph, .media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-4x5 { aspect-ratio: 4 / 5; } .r-3x2 { aspect-ratio: 3 / 2; } .r-1x1 { aspect-ratio: 1; } .r-4x3 { aspect-ratio: 4 / 3; }

/* Material placeholders: stand-ins for architectural photography (replace with real images). */
.ph { display: block; }
.ph-timber { background: linear-gradient(115deg, transparent 38%, rgba(255, 214, 160, .55) 46%, rgba(255, 220, 170, .35) 52%, transparent 60%), repeating-linear-gradient(90deg, #3a2618 0 2px, #4a301e 2px 64px, #2e1e13 64px 66px, #553722 66px 130px); }
.ph-concrete { background: radial-gradient(120% 80% at 70% 20%, #d9d8d3, #a9a8a2 70%), #bdbcb6; }
.ph-marble { background: linear-gradient(160deg, transparent 30%, rgba(90, 80, 70, .35) 31%, transparent 33%), linear-gradient(20deg, transparent 55%, rgba(120, 100, 80, .25) 56%, transparent 58%), radial-gradient(90% 70% at 30% 40%, #f4f1ec, #d8d2c8); }
.ph-night { background: radial-gradient(30% 20% at 62% 30%, rgba(255, 200, 140, .5), transparent 70%), linear-gradient(180deg, #1d1f22, #2b2d30 55%, #121314); }
.ph-glass { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .09) 0 3px, transparent 3px 14px), linear-gradient(100deg, #2b3b3a, #5c706d 50%, #23302f); }
.ph-sky { background: linear-gradient(180deg, #8fb3d9, #dbe7f2 70%, #f2efe8); }
.ph-brick { background: repeating-linear-gradient(0deg, #e9e3da 0 2px, transparent 2px 18px), repeating-linear-gradient(90deg, #a2563b 0 46px, #8a452f 46px 48px); }
.ph-kitchen { background: linear-gradient(180deg, #2a2a2c 0 46%, #c9a77a 46% 48%, #e8e4dc 48% 62%, #3a3a3d 62%); }

/* ---------- Project cards: staggered two-up grid, caption name left / year right ---------- */
.projects { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--space-section); align-items: start; }
.card { display: block; }
.card .media > * { transition: transform 1.2s var(--e-smooth); }
.card:hover .media > * { transform: scale(1.04); }
.card-cap { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-s); }
.card-cap .muted { font-size: var(--step-0); }
.card.feature { grid-column: 4 / 10; }
.card.a { grid-column: 1 / 6; } .card.b { grid-column: 7 / 12; margin-top: 24vh; } .card.c { grid-column: 2 / 7; margin-top: -10vh; }
@media (max-width: 767px) { .projects { grid-template-columns: 1fr; } .card.feature, .card.a, .card.b, .card.c { grid-column: 1 / -1; margin-top: 0; } }

/* ---------- Collaborators: hairline list + carousel with counter ---------- */
.list-2 { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr auto; font-size: var(--step-0); }
.list-2 li { display: contents; }
.list-2 span { padding: 10px 0; border-top: 1px solid var(--line); }
.list-2 span + span { text-align: right; padding-left: 1em; color: var(--muted); }
.carousel .media .ph { clip-path: inset(0 0 0 100%); transition: clip-path 1s var(--e-el); }
.carousel .media .ph.on { clip-path: inset(0); }
.carousel .media .ph.out { clip-path: inset(0 100% 0 0); }
.carousel-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding-top: var(--space-xs); font-size: var(--step-0); }
.carousel-bar .ctrl { display: flex; gap: 1.2em; }

/* ---------- Awards: rows on hairlines that draw in from the left, year flush right ---------- */
.rows { list-style: none; padding: 0; }
.rows li { display: grid; grid-template-columns: 4fr 7fr 1fr; column-gap: var(--col-gap); padding: 12px 0; position: relative; }
.rows li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: left; transform: scaleX(var(--rx, 1)); }
.rows li > :last-child { text-align: right; }
@media (max-width: 767px) { .rows li { grid-template-columns: 1fr auto; } .rows li > :nth-child(2) { grid-row: 2; color: var(--muted); } }

/* ---------- Footer: cobalt room, nav top-left, the wordmark again, legal row ---------- */
.footer { background: var(--cobalt); color: var(--white); padding-top: var(--space-l); overflow: hidden; }
.footer .mark { color: var(--white); }
.footer-nav { list-style: none; padding: 0; font-size: var(--step-0); line-height: 1.75; }
.footer .wordmark { color: var(--white); margin-top: var(--space-section); }
.footer-legal { display: flex; justify-content: space-between; font-size: var(--step--1); padding-block: var(--space-m); }

/* ---------- Reveal states (cobalt-motion.js). Hidden only when JS runs. ---------- */
.s-mask { display: block; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }
.s-line { display: block; will-change: transform; }
.js [data-c] { visibility: hidden; }
.js [data-c].c-on { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
  .sgallery { height: auto; } .sgallery-inner { position: relative; }
  .sgallery-frame { transform: none; clip-path: none; height: 80vh; }
}

/* ───────────── Clearwater page layer ───────────── */
:root{--rib:32px}
html.shot{--rib:0px}
html{scroll-padding-top:calc(var(--rib) + 90px)}
.header{top:var(--rib)}
.shot .curtain{display:none}

/* clinic placeholders, in the pack's material idiom: mint glass, a chair in daylight, a white corridor */
.ph-mint{background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 3px,transparent 3px 16px),linear-gradient(100deg,#bfd9d3,#e9f3f0 50%,#a9cbc3)}
.ph-chair{background:radial-gradient(26% 20% at 58% 62%,#f4f6f6 0 60%,transparent 62%),radial-gradient(14% 30% at 40% 52%,#0c388d 0 55%,transparent 58%),linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 48%,transparent 58%),linear-gradient(180deg,#dfe9ec,#c7d6dc 60%,#aebfc7)}
.ph-hall{background:linear-gradient(90deg,#e6e9eb 0 18%,transparent 18% 82%,#e6e9eb 82%),repeating-linear-gradient(90deg,transparent 0 120px,rgba(12,56,141,.08) 120px 122px),linear-gradient(180deg,#fafafa,#e9edef 70%,#d7dde0)}
.ph-lamp{background:radial-gradient(18% 14% at 50% 30%,#fffbe8,rgba(255,251,232,.4) 60%,transparent 70%),linear-gradient(180deg,#30455d,#1b2738)}

/* prices and the first visit: rows on hairlines, with a price or a clock in the last cell */
.rows .price,.rows .clock{text-align:right;font-variant-numeric:tabular-nums}
.rows .clock{text-align:left}
.rows small{display:block;color:var(--muted);font-size:var(--step-0)}
.rows--visit li{grid-template-columns:1fr 4fr 7fr}

/* booking: square chips on hairlines, underline fields, a cobalt-free submit (cobalt belongs to the rooms) */
.book-form{display:grid;gap:var(--space-l);grid-column:6 / 12}
.book-form label,.book-form fieldset{display:grid;gap:var(--space-xs,8px)}
.book-form .chips{display:flex;flex-wrap:wrap;gap:8px}
.book-form .ex-chip{height:44px;padding:0 18px;border:1px solid var(--line);background:var(--white);font:400 var(--step-0)/1 var(--f-sans, inherit);font-variant-numeric:tabular-nums;cursor:pointer;transition:background .35s var(--e-out),color .35s var(--e-out),border-color .35s var(--e-out)}
.book-form .ex-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.book-form select,.book-form input{width:100%;height:52px;padding:0;border:0;border-bottom:1px solid var(--line);background:transparent;font:inherit;font-size:var(--step-4);letter-spacing:-.03em;color:var(--ink);border-radius:0;appearance:none;-webkit-appearance:none;transition:border-color .35s var(--e-out)}
.book-form select:focus,.book-form input:focus{outline:0;border-bottom-color:var(--ink)}
.book-form .pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-m)}
.book-form button[type="submit"]{justify-self:start;height:52px;padding:0 28px;border:0;background:var(--pill);font:inherit;cursor:pointer;transition:background .35s var(--e-out)}
.book-form button[type="submit"]:hover{background:var(--line)}
.book-form [data-note]:empty{display:none}
.book-form [data-note]{padding-top:var(--space-s);border-top:1px solid var(--line);max-width:34em}
@media (max-width:767px){.book-form{grid-column:1 / -1}.book-form .pair{grid-template-columns:1fr}.rows--visit li{grid-template-columns:1fr 3fr}}
.rows--visit li > :last-child{text-align:left;color:var(--ink-2)}
@media (max-width:767px){.rows--visit li > :nth-child(2){grid-row:auto;color:var(--ink)}.rows--visit li > :last-child{grid-column:1 / -1}}