@font-face{font-family:'Manrope';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/830d6d35-9e8f-421d-95bc-199e64179aeb.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/107c77c9-f941-4f2a-b64d-3eb8d7d8957c.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 600;font-display:swap;src:url(/assets/fonts/1a36f167-3a9d-4045-8e51-4894c34bdcb4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Elevate Chiropractic webfonts.
   No brand binaries were supplied; these are the closest Google Fonts matches.
   Playfair Display is the display face; Manrope is the sans.
   Jost is the geometric sans used for all UI, labels and body copy. */
:root{
  /* --- Core brand (sampled from logo.png) --- */
  --navy-900:#001531;
  --navy-800:#001F41;   /* logo navy — the brand anchor */
  --navy-700:#0B3160;
  --navy-600:#1B4A82;
  --navy-400:#5A7CA6;
  --navy-200:#AFC1D6;

  --gold-600:#8E6716;
  --gold-500:#A97C1F;
  --gold-400:#D6A232;   /* logo gold */
  --gold-300:#E3BC63;
  --gold-200:#EFD8A3;
  --gold-100:#F7EBD2;

  /* --- Spruce: the Maine-coast secondary dark field --- */
  --spruce-900:#0E2621;
  --spruce-700:#14322B;
  --spruce-500:#2E5348;
  --spruce-200:#B9CCC4;

  /* --- Warm neutrals (limestone / bone) --- */
  --bone-050:#FFFDF8;
  --bone-000:#FFFDF9;
  --bone-100:#F8F5EF;
  --bone-200:#F1ECE2;
  --bone-300:#E6DFD1;
  --bone-400:#D3C9B6;
  --stone-500:#A79C8A;
  --stone-600:#7C7466;
  --stone-700:#55503F;
  --ink-900:#171716;

  /* --- Semantic: surfaces --- */
  --surface-page:var(--bone-050);
  --surface-raised:var(--bone-100);
  --surface-sunken:var(--bone-200);
  --surface-card:var(--bone-100);
  --surface-inverse:var(--navy-800);
  --surface-inverse-deep:var(--navy-900);
  --surface-accent:var(--spruce-700);
  --surface-gold-wash:var(--gold-100);

  /* --- Semantic: text --- */
  --text-strong:var(--navy-900);
  --text-body:#2A2A26;
  --text-muted:var(--stone-700);
  --text-faint:var(--stone-600);
  --text-on-dark:var(--bone-100);
  --text-on-dark-muted:#C2CEDD;
  --text-gold:var(--gold-500);
  --text-link:var(--navy-700);
  --text-link-hover:var(--gold-500);

  /* --- Semantic: lines --- */
  --line-hairline:rgba(0,31,65,.14);
  --line-strong:rgba(0,31,65,.30);
  --line-gold:rgba(214,162,50,.55);
  --line-on-dark:rgba(247,235,210,.20);

  /* --- Semantic: interactive --- */
  --action-primary:var(--navy-800);
  --action-primary-hover:var(--navy-700);
  --action-primary-text:var(--bone-000);
  --action-accent:var(--gold-400);
  --action-accent-hover:var(--gold-300);
  --action-accent-text:var(--navy-900);
  --focus-ring:var(--gold-400);

  /* --- Status --- */
  --status-success:#2E6B4F;
  --status-warning:var(--gold-500);
  --status-danger:#8E2A21;
  --status-info:var(--navy-600);
  --status-success-wash:#E7F0EA;
  --status-warning-wash:var(--gold-100);
  --status-danger-wash:#F6E7E5;
  --status-info-wash:#E7EDF5;
}

:root{
  --font-display:"Playfair Display",'Times New Roman',serif;
  --font-sans:"Manrope",-apple-system,"Segoe UI",sans-serif;
  --font-body:var(--font-sans);

  /* Display scale — Playfair Display, tight leading, weight 400–500 only */
  --display-1:clamp(3rem,6.2vw,5.75rem); /* @kind font */
  --display-2:clamp(2.5rem,4.4vw,4rem); /* @kind font */
  --display-3:clamp(2rem,3.2vw,2.875rem); /* @kind font */
  --display-4:1.75rem; /* @kind font */
  --lh-display:1.06; /* @kind other */
  --lh-display-loose:1.14; /* @kind other */
  --ls-display:-0.01em; /* @kind other */

  /* Text scale */
  --text-xs:0.75rem; /* @kind font */
  --text-sm:0.8125rem; /* @kind font */
  --text-base:1rem; /* @kind font */
  --text-md:1.125rem; /* @kind font */
  --text-lg:1.25rem; /* @kind font */
  --text-xl:1.375rem; /* @kind font */
  --lh-tight:1.25; /* @kind other */
  --lh-body:1.7; /* @kind other */
  --lh-loose:1.8; /* @kind other */

  /* Eyebrow / label: letterspaced small caps in Jost 500 */
  --eyebrow-size:0.6875rem; /* @kind font */
  --eyebrow-ls:0.22em; /* @kind other */
  --eyebrow-weight:500; /* @kind other */
  --label-ls:0.06em; /* @kind other */

  --weight-light:300; /* @kind font */
  --weight-regular:400; /* @kind font */
  --weight-medium:500; /* @kind font */
  --weight-semibold:600; /* @kind font */
}

:root{
  /* 8px system; 4px half-step only for inline icon/text optics */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:16px;
  --sp-4:24px;
  --sp-5:32px;
  --sp-6:40px;
  --sp-7:56px;
  --sp-8:72px;
  --sp-9:96px;
  --sp-10:128px;
  --sp-11:176px;

  --section-y:clamp(72px,9vw,144px); /* @kind spacing */
  --section-y-tight:clamp(48px,5vw,80px); /* @kind spacing */

  --grid-max:1440px; /* @kind spacing */
  --gutter:24px; /* @kind spacing */
  --grid-cols:12; /* @kind other */
  --col-gap:24px; /* @kind spacing */
  --measure:62ch; /* @kind spacing */
  --measure-tight:46ch; /* @kind spacing */

  /* Radii — soft 20px corners across surfaces, media and controls. */
  --radius-0:0px;
  --radius-1:20px;
  --radius-2:20px;
  --radius-control:6px;
  --radius-pill:999px;
}

:root{
  /* Shadows are navy-tinted and low; the system leans on hairlines, not lift. */
  --shadow-0:none;
  --shadow-1:0 1px 2px rgba(0,21,49,.05);
  --shadow-2:0 8px 24px -12px rgba(0,21,49,.18);
  --shadow-3:0 24px 64px -28px rgba(0,21,49,.28);
  --shadow-inset-hairline:inset 0 0 0 1px var(--line-hairline);
  --shadow-inset-gold:inset 0 0 0 1px var(--line-gold);

  /* Protection gradient for text over photography */
  --scrim-bottom:linear-gradient(180deg,rgba(0,21,49,0) 0%,rgba(0,21,49,.28) 45%,rgba(0,21,49,.82) 100%); /* @kind other */
  --scrim-left:linear-gradient(90deg,rgba(0,21,49,.86) 0%,rgba(0,21,49,.45) 45%,rgba(0,21,49,0) 100%); /* @kind other */
  --scrim-flat:rgba(0,21,49,.55); /* @kind other */

  --blur-glass:saturate(1.1) blur(14px); /* @kind other */
  --glass-on-dark:rgba(0,21,49,.55); /* @kind other */
  --glass-on-light:rgba(255,253,249,.72); /* @kind other */
}

:root{
  --ease-out:cubic-bezier(.16,.84,.36,1); /* @kind other */
  --ease-in-out:cubic-bezier(.62,.05,.31,.98); /* @kind other */
  --ease-linear:linear; /* @kind other */
  --dur-1:120ms; /* @kind other */   /* micro: color, opacity */
  --dur-2:220ms; /* @kind other */   /* control state change */
  --dur-3:420ms; /* @kind other */   /* panel, accordion */
  --dur-4:900ms; /* @kind other */   /* scroll reveal */
  --reveal-shift:22px; /* @kind spacing */
  --transition-control:color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out); /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-3:1ms /* @kind other */;--dur-4:1ms /* @kind other */;--reveal-shift:0px}
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-md);line-height:var(--lh-body);font-weight:var(--weight-medium);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;color:var(--text-strong);line-height:var(--lh-display);letter-spacing:var(--ls-display);margin:0}
h1{font-size:var(--display-1)}h2{font-size:var(--display-2)}h3{font-size:var(--display-3)}h4{font-size:var(--display-4)}
p{margin:0 0 1em}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--line-gold);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--gold-400)}
::selection{background:var(--gold-200);color:var(--navy-900)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
img{max-width:100%;display:block}
.eyebrow{font-family:var(--font-sans);font-size:var(--eyebrow-size);font-weight:var(--eyebrow-weight);letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--text-gold)}
.measure{max-width:var(--measure)}
.container{max-width:var(--grid-max);margin-inline:auto;padding-inline:var(--gutter)}

*{box-sizing:border-box}
html,body{margin:0}
html{scrollbar-color:var(--gold-400) #e8e8e8}
::-webkit-scrollbar-thumb{background:var(--gold-400)}
::-webkit-scrollbar-thumb:hover{background:var(--gold-300)}
body{background:#000;color:var(--bone-000);font-family:var(--font-sans);min-width:1920px}
.wrap{min-width:1920px;width:2310px;max-width:100%;padding:0 max(0px,calc((100% - 1920px)/2));margin:0 auto;background:#000}
a{color:var(--gold-300);text-decoration:none}
a:hover{color:var(--gold-200)}
.stage{position:relative;width:1920px;min-height:100vh;display:grid;grid-template-columns:1.35fr 1fr;overflow:hidden;background:var(--navy-800)}
.art{position:absolute;inset:0}
.art img{width:100%;height:100%;object-fit:cover;object-position:30% 50%;animation:pan 30s var(--ease-in-out) infinite alternate;transform-origin:30% 50%}
@keyframes pan{0%{transform:scale(1.03)}100%{transform:scale(1.12) translate3d(-2%,-1.5%,0)}}
@media (prefers-reduced-motion:reduce){.art img{animation:none}}
.scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,31,65,.86) 0%,rgba(0,31,65,.72) 45%,rgba(0,21,49,.55) 100%)}
.hero{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:56px 96px}
.mark{height:250px;width:auto;display:block;margin-bottom:36px}
h1{margin:0;font-family:var(--font-display);font-size:72px;line-height:1.06;letter-spacing:-.015em;color:var(--bone-000)}
h1 em{font-style:italic;color:var(--gold-300)}
.svcRule{width:70%;height:2px;background:var(--gold-400);margin:36px auto 0}
.svc{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:32px;margin-top:22px}
.svc span{font-size:14px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-300);white-space:nowrap}
.cta{margin-top:40px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:12px;font-size:var(--text-base);font-weight:600;background:var(--gold-400);color:var(--navy-900);transition:background .25s var(--ease-out)}
.btn:hover{background:var(--gold-300);color:var(--navy-900)}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn .num{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.panel{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:56px 96px;background:rgba(0,21,49,.82);border-left:1px solid var(--line-on-dark);backdrop-filter:blur(6px)}
.panelInner{display:flex;flex-direction:column;gap:40px;text-align:left}
.panel h2{margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line-on-dark);font-size:32px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-300)}
.panel p,.panel address{margin:0;font-style:normal;font-size:18px;line-height:1.7;color:var(--text-on-dark)}
.panel .big{font-family:var(--font-display);font-size:36px;line-height:1.15;color:var(--bone-000)}
.panel a{color:var(--text-on-dark);border-bottom:1px solid var(--line-on-dark)}
.panel a:hover{color:var(--gold-300);border-color:var(--gold-300)}

.hours{display:grid;grid-template-columns:auto 1fr;column-gap:32px;row-gap:4px;font-size:17px;line-height:1.5}
.hours dt{margin:0;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:13px;color:var(--text-on-dark-muted);padding-top:3px}
.hours dd{margin:0;color:var(--text-on-dark);font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- Responsive layer (Links Web Design). The mockup above is a fixed 1920px
   artboard; these rules let it flow below that width. --- */
body{min-width:0}
.wrap{min-width:0;width:100%;padding:0}
.stage{width:100%;max-width:1920px;margin:0 auto}
.art picture{display:block;width:100%;height:100%}
@media (max-width:1919px){
  .hero,.panel{padding:clamp(28px,5vw,96px)}
  .mark{height:clamp(150px,13vw,250px)}
  h1{font-size:clamp(2.5rem,3.75vw,72px)}
  .svc{flex-wrap:wrap;gap:clamp(14px,1.7vw,32px);row-gap:12px}
  .svc span{font-size:clamp(12px,.73vw,14px)}
  .panel h2{font-size:clamp(22px,1.67vw,32px)}
  .panel .big{font-size:clamp(28px,1.9vw,36px)}
  .panel p,.panel address{font-size:clamp(16px,.94vw,18px)}
  .hours{font-size:clamp(15px,.9vw,17px)}
}
@media (max-width:1023px){
  .stage{grid-template-columns:1fr;min-height:0}
  .hero{padding-top:clamp(48px,8vw,72px);padding-bottom:clamp(40px,6vw,64px)}
  .panel{border-left:0;border-top:1px solid var(--line-on-dark);padding-top:clamp(40px,6vw,56px);padding-bottom:clamp(40px,6vw,56px)}
  .panelInner{gap:32px;width:100%;max-width:520px}
  .svcRule{width:min(70%,520px)}
}
@media (max-width:640px){
  .mark{height:clamp(120px,32vw,150px);margin-bottom:28px}
  h1{font-size:clamp(2.1rem,9vw,2.5rem)}
  .svc{flex-direction:column;gap:10px}
  .svc span{white-space:normal;letter-spacing:.16em}
  .btn{padding:14px 22px;font-size:.95rem}
  .panel h2{font-size:20px;letter-spacing:.12em}
  .hours{grid-template-columns:auto 1fr;column-gap:20px}
  .hours dd{white-space:normal}
}
