/* =====================================================================
   Klinik Pergigian Setia — stylesheet

   COLOURS
   The blue below (#2490CC) is sampled straight from the clinic's own
   logo file, so the site matches the sign on the door. The page is
   white throughout. If you ever want to change the accent colour,
   change --brand in this one block and the whole site follows.
   ===================================================================== */

:root {
  /* ---------------------------------------------------------------
     Palette derived from images/setia-logo.png.

     The logo is one blue, #2090d0, across 2232 of its pixels, with a
     pale sky highlight in the leaf. That blue is the identity, but at
     3.52:1 against white it cannot carry white button text, so the
     ramp below steps it down for anything that has to be read and
     keeps the original for fills and accents.

     Every pairing in this file was measured, not guessed. Structure
     (radii, three-tier buttons, one heavy display weight) follows the
     Wise system in wise/DESIGN.md; the colour does not.
     --------------------------------------------------------------- */

  /* Brand ramp, hue 202 */
  --brand:        #2090d0;  /* the logo blue. Fills and accents only. */
  --brand-dark:   #1971a4;  /* 5.33 on white. Buttons, links, labels.  */
  --brand-deep:   #114c6f;  /* 9.18 on white. Deep bands, strong text. */
  --brand-soft:   #e4f3fb;  /* secondary button fill, soft surfaces    */
  --brand-pale:   #f2f9fd;  /* the faintest page tint                  */
  --sky:          #80d0f0;  /* the leaf highlight. Decorative only.    */

  /* Backgrounds */
  --ground:     #ffffff;
  --surface:    #ffffff;
  --surface-2:  #edf4f8;   /* the tinted band between sections */
  --surface-3:  #e4f3fb;

  /* Text. Near-black carries a slight blue bias so it sits with the
     brand rather than against it. */
  --ink:    #0f1720;   /* headings, 18.05 on white */
  --ink-2:  #46545f;   /* body, 7.80 */
  --ink-3:  #62717c;   /* captions and labels, 4.53 on the tinted band */

  /* Lines and borders */
  --line:     #dce7ee;
  --line-2:   #b9cedd;
  --line-ink: #0f1720;  /* the hard border on a tertiary button */

  /* Text on a brand-coloured fill: the primary button, the nav button
     and the name badge over the portrait. */
  --on-brand: #ffffff;

  /* Corner radii, from the Wise scale. */
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 9999px;

  /* The only two shadows in the design. Do not add a third. */
  --shadow-card: 0 14px 40px -24px rgba(15, 23, 32, .30);
  --shadow-drop: 0 18px 44px -20px rgba(15, 23, 32, .34);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .g {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  /* Wise runs every display size at 900. The whole look depends on it. */
  font-weight: 900;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.m { font-family: "Inter", system-ui, sans-serif; }

.shell { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2.5px solid var(--brand-dark); outline-offset: 3px; border-radius: var(--r-sm); }




/* ---------- navigation ---------- */
nav {
  border-bottom: 1px solid var(--line);
  background: var(--ground);
  position: sticky; top: 0; z-index: 50;
}
nav .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 14px; padding-bottom: 14px;
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 46px; width: auto; }
.navlinks { display: flex; gap: 22px; align-items: center; }
.navlinks > a,
.navlinks .droptoggle {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  color: var(--ink-2); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.navlinks > a:hover,
.navlinks .droptoggle:hover { color: var(--brand-dark); }
.navlinks > a.current { color: var(--ink); }

/* ---- Services dropdown ---- */
/* A flex container, not a block. As a block it built a line box from
   the inherited 18px body text, 28.8px tall against the 21.6px of every
   other nav item, and the inline-flex button sat on that larger
   baseline. Services rendered 1.41px lower than its siblings. */
.has-drop { position: relative; display: flex; align-items: center; }
.droptoggle {
  background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; color: inherit;
}
.droptoggle .caret {
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; display: inline-block;
  transition: transform .18s;
}
.has-drop[data-open="true"] .droptoggle .caret { transform: rotate(180deg); }

.dropmenu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-drop);
  padding: 8px; min-width: 280px; z-index: 60;
  display: none;
}
.has-drop[data-open="true"] .dropmenu,
.has-drop:hover .dropmenu,
.has-drop:focus-within .dropmenu { display: block; }

.dropmenu a {
  display: block; padding: 9px 14px; border-radius: var(--r-sm); text-decoration: none;
  font-family: "Inter", system-ui, sans-serif; font-size: 14.5px; font-weight: 500;
  color: var(--ink-2); letter-spacing: -.01em; line-height: 1.3;
}
.dropmenu a:hover { background: var(--brand-soft); color: var(--brand-dark); }
.dropmenu .allservices {
  border-top: 1px solid var(--line); margin-top: 6px; padding-top: 11px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-dark);
}
/* The persistent nav button. Wise button-primary, one size down, so it
   does not compete with a page's own primary. */
.callbtn {
  background: var(--brand-dark); color: var(--on-brand); text-decoration: none;
  font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: 14px;
  padding: 12px 20px; border-radius: var(--r-xl); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .18s;
}
.callbtn:hover { background: var(--brand-deep); }
.callbtn .btn-ico { width: 16px; height: 16px; }
@media (max-width: 900px) { .navlinks { display: none; } }


/* ---------- hero ---------- */
.hero { padding: 60px 0 0; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 56px; align-items: end;
}
.eyebrow {
  font-family: "Inter", system-ui, sans-serif; font-size: 12px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--brand-dark); margin: 0 0 22px;
  display: flex; align-items: center; gap: 11px;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line-2); max-width: 110px; }

h1 {
  font-size: clamp(42px, 6.4vw, 78px); line-height: .99;
  margin: 0 0 24px; font-weight: 900; letter-spacing: -.042em;
}
/* The lime accent is a fill, not a text colour: at 900 on white it
   fails contrast badly. It gets a pale-green highlight instead. */
h1 em {
  font-style: normal; font-weight: 900; color: var(--ink);
  background: var(--brand-soft);
  border-radius: var(--r-md);
  padding: 0 .12em; margin: 0 -.04em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

.lede {
  font-size: clamp(18px, 2.1vw, 21px); color: var(--ink-2);
  max-width: 44ch; margin: 0 0 32px; font-weight: 400; line-height: 1.55;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
/* Wise button-md: Inter 600, 16px on a 24px line, 12px/24px padding,
   radius xl. Every variant shares this geometry; only the fill and the
   border change. Padding is raised to 16px vertical so the control
   clears the 44px tap target on its own. */
.btn-lg {
  font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: 16px;
  line-height: 24px;
  padding: 16px 24px; border-radius: var(--r-xl); text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background .18s, border-color .18s, color .18s;
  border: 1.5px solid transparent;
}
/* --- Buttons ----------------------------------------------------------
   Three variants, exactly as the Wise system defines them. There is no
   fourth. Primary is the lime fill, and it carries near-black text
   rather than white, because on-primary is #0e0f0c.
     .btn-primary    lime fill      the one action that matters here
     .btn-secondary  sage fill      a real alternative, no border
     .btn-ghost      white + ink border   neutral, "go somewhere else"
   --------------------------------------------------------------------- */

.btn-primary {
  background: var(--brand-dark);
  color: var(--on-brand);
}
.btn-primary:hover { background: var(--brand-deep); }

.btn-secondary {
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.btn-secondary:hover { background: var(--sky); }

.btn-ghost {
  background: var(--surface);
  border-color: var(--line-ink);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--surface-2); }

/* Size variant. Keeps the pill shape, just less of it. */
.btn-sm { font-size: 14px; padding: 12px 20px; }

/* Icon inside any button. Inherits the button's colour. */
.btn-ico {
  width: 18px; height: 18px; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.hero-photo { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/5; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }


/* ---------- section headings ---------- */
section { padding: 84px 0; }
.sec-head {
  display: grid; grid-template-columns: minmax(0, .32fr) minmax(0, .68fr);
  gap: 44px; margin-bottom: 44px; align-items: start;
}
.sec-lab {
  font-family: "Inter", system-ui, sans-serif; font-size: 11.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--brand-dark); padding-top: 11px;
}
h2 {
  font-size: clamp(30px, 4vw, 46px); line-height: 1.04;
  margin: 0 0 16px; font-weight: 900; letter-spacing: -.038em;
}
.sec-head p { margin: 0; color: var(--ink-2); font-size: 19px; font-weight: 400; max-width: 52ch; }


/* ---------- "how we look after you" icon row ---------- */
.care { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
        background: var(--line); border: 1px solid var(--line); }
.care-item { background: var(--ground); padding: 30px 26px; }
.care-item img { width: 58px; height: 58px; margin-bottom: 18px; opacity: .82; }
.care-item h3 {
  font-size: 18px; font-weight: 600; margin: 0 0 8px;
  letter-spacing: -.02em; color: var(--ink);
}
.care-item p { margin: 0; font-size: 15.5px; color: var(--ink-2); font-weight: 400; line-height: 1.5; }


/* ---------- treatments list ---------- */
.svc { border-top: 1px solid var(--line-2); }
.svc-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 26px;
  align-items: baseline; padding: 22px 4px;
  border-bottom: 1px solid var(--line); text-decoration: none;
  transition: padding .22s ease, background .22s ease;
}
.svc-row:hover { background: var(--surface-2); padding-left: 16px; padding-right: 16px; }
.svc-i {
  font-family: "Inter", system-ui, sans-serif; font-size: 12px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; min-width: 26px;
}
.svc-n {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(20px, 2.6vw, 27px); font-weight: 600;
  letter-spacing: -.028em; color: var(--ink); line-height: 1.2;
}
.svc-d {
  display: block; font-family: "Inter", system-ui, sans-serif; font-size: 16px; font-weight: 400;
  color: var(--ink-3); letter-spacing: 0; margin-top: 5px; max-width: 56ch; line-height: 1.5;
}
.svc-a { font-family: "Inter", system-ui, sans-serif; font-size: 16px; color: var(--ink-3);
         transition: color .2s, transform .2s; }
.svc-row:hover .svc-a { color: var(--brand-dark); transform: translateX(4px); }
.svc-row:hover .svc-n { color: var(--brand-dark); }


/* ---------- photo grid ---------- */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
.pgrid figure { margin: 0; }
.pgrid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-xl); }
.pgrid figcaption {
  font-family: "Inter", system-ui, sans-serif; font-size: 11px; letter-spacing: .06em;
  color: var(--ink-3); margin-top: 9px; line-height: 1.45;
}


/* ---------- wide banner ---------- */
.banner { position: relative; background: var(--surface-3); overflow: hidden; }
.banner img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
}
.banner .shell { position: relative; padding-top: 76px; padding-bottom: 76px; }
.banner .inner { max-width: 30ch; }
.banner h2 { color: var(--ink); margin-bottom: 14px; }
.banner p { color: var(--ink-2); font-size: 18px; font-weight: 400; margin: 0 0 26px; }
@media (max-width: 800px) {
  .banner img { opacity: .18; }
  .banner .inner { max-width: none; }
}


/* ---------- the dentist ---------- */
.doc { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; }
/* Capped at the source size. The only headshot the clinic has is 365px,
   so letting the box grow past that just renders a soft, upscaled face. */
.doc-photo { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 1/1; max-width: 365px; }
.doc-photo img { width: 100%; height: 100%; object-fit: cover; }
.doc-photo span {
  position: absolute; left: 0; bottom: 0; background: var(--brand-dark); color: var(--on-brand);
  font-family: "Inter", system-ui, sans-serif; font-size: 11px; letter-spacing: .11em;
  text-transform: uppercase; padding: 9px 14px;
}
.doc blockquote {
  margin: 0 0 26px; font-size: clamp(21px, 2.7vw, 29px); line-height: 1.35;
  font-weight: 400; letter-spacing: -.018em; color: var(--ink);
}
.doc blockquote::before { content: "\201C"; color: var(--brand-dark); font-size: 1.1em; line-height: 0; }
.doc .attrib {
  font-family: "Inter", system-ui, sans-serif; font-size: 12px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 30px;
}
.doc p.bio { color: var(--ink-2); font-size: 17px; font-weight: 400; margin: 0 0 14px; max-width: 56ch; }

.team {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 40px;
}
.tm { background: var(--ground); padding: 20px 18px; }
.tm .tn {
  font-family: "Inter", system-ui, sans-serif; font-size: 17px;
  font-weight: 600; letter-spacing: -.02em; margin-bottom: 5px;
}
.tm .tr {
  font-family: "Inter", system-ui, sans-serif; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand-dark);
}




/* ---------- opening hours table (contact page) ----------
   There used to be two of these: a dark one for the Find Us band and a
   .hours-light override for the white contact page. The band is gone,
   so this is the only version and it needs no override. */
.hours { border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.hr-row {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-family: "Inter", system-ui, sans-serif; font-size: 13.5px;
  letter-spacing: .02em; align-items: center;
}
.hr-row:last-child { border-bottom: 0; }
.hr-row .d { color: var(--ink-3); text-transform: uppercase; font-size: 11.5px; letter-spacing: .11em; }
.hr-row .t { color: var(--ink); font-variant-numeric: tabular-nums; }
.hr-row.now { background: var(--brand-soft); }
.hr-row.now .d { color: var(--brand-dark); font-weight: 500; }
.hr-note {
  font-family: "Inter", system-ui, sans-serif; font-size: 11.5px; color: var(--ink-3);
  margin-top: 14px; letter-spacing: .03em; line-height: 1.6;
}
.addr {
  font-family: "Inter", system-ui, sans-serif; font-size: 17px; font-weight: 400;
  line-height: 1.75; color: var(--ink); margin: 26px 0;
}


/* ---------- closing CTA band ----------
   Centred, one heading, one button. Sits directly above the footer,
   which carries the address, phone, email and hours summary. */
.cta-band {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  text-align: center;
}
.cta-band h2 {
  font-size: clamp(28px, 4vw, 44px); line-height: 1.1;
  margin: 0 0 28px; letter-spacing: -.035em;
  max-width: 18ch; margin-left: auto; margin-right: auto;
}
.cta-note {
  margin: 20px 0 0; font-size: 15px; color: var(--ink-2);
}
.cta-note a { color: var(--brand-dark); font-weight: 600; text-decoration: none; }
.cta-note a:hover { text-decoration: underline; }


/* ---------- footer ---------- */
footer { padding: 50px 0 40px; border-top: 1px solid var(--line); background: var(--surface-2); }
.foot { display: flex; flex-wrap: wrap; gap: 26px 48px; justify-content: space-between; align-items: flex-start; }
.foot img.flogo { height: 44px; width: auto; margin-bottom: 14px; }
.foot .m { font-size: 12px; color: var(--ink-3); letter-spacing: .03em; line-height: 1.85; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--brand-dark); }
.footnav {
  display: flex; gap: 22px; flex-wrap: wrap;
  font-family: "Inter", system-ui, sans-serif; font-size: 14.5px; font-weight: 500;
}


/* ---------- responsive ---------- */
@media (max-width: 950px) {
  .hero-grid, .doc { grid-template-columns: 1fr; gap: 36px; }
  .sec-head { grid-template-columns: 1fr; gap: 14px; }
  .sec-lab { padding-top: 0; }
  .care { grid-template-columns: 1fr 1fr; }
  .pgrid { grid-template-columns: 1fr 1fr; }
  .hero-photo { aspect-ratio: 16/11; }
  /* A square headshot, so it keeps 1:1 at every width. Cropping it to a
     landscape box would cut the top of the head off. */
  .doc-photo { aspect-ratio: 1/1; max-width: 420px; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .shell { padding: 0 20px; }
  section { padding: 58px 0; }
  .hero { padding-top: 40px; }
  .svc-row { grid-template-columns: auto 1fr; gap: 16px; }
  .svc-a { display: none; }
  .care { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}


/* =====================================================================
   INNER PAGES
   Styles below are used by the pages other than the homepage.
   ===================================================================== */

/* ---------- page header (top of every inner page) ---------- */
.pagehead { padding: 56px 0 40px; border-bottom: 1px solid var(--line); }
.pagehead h1 { font-size: clamp(34px, 5vw, 58px); margin: 0 0 18px; }
.pagehead .lede { margin-bottom: 0; }
.pagehead .eyebrow { margin-bottom: 18px; }

/* ---------- article layout (services + blog posts) ---------- */
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.article-body h2 {
  font-size: clamp(23px, 2.7vw, 30px); margin: 40px 0 14px;
  letter-spacing: -.03em; line-height: 1.15;
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-size: 18px; margin: 0 0 7px; letter-spacing: -.02em; }
.article-body p { color: var(--ink-2); margin: 0 0 16px; max-width: 68ch; }
.article-body ul { color: var(--ink-2); padding-left: 22px; margin: 0 0 18px; max-width: 68ch; }
.article-body li { margin-bottom: 9px; }
.article-body strong { color: var(--ink); font-weight: 500; }
.post-hero { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-xl); margin-bottom: 22px; }
.post-meta {
  font-family: "Inter", system-ui, sans-serif; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 22px !important;
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); margin-top: 6px; }
.faq-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.faq-item p { margin: 0; font-size: 16.5px; }

/* ---------- inline call to action ---------- */
/* ---------- article sidebar ---------- */
.side-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-xl); margin-bottom: 20px; }
.side-card { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px; background: var(--surface-2); }
.side-card h3 {
  font-family: "Inter", system-ui, sans-serif; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-dark); margin: 0 0 12px; font-weight: 500;
}
.side-links { list-style: none; margin: 0; padding: 0; }
.side-links li { border-bottom: 1px solid var(--line); }
.side-links li:last-child { border-bottom: 0; }
.side-links a {
  display: block; padding: 9px 0; text-decoration: none; color: var(--ink-2);
  font-family: "Inter", system-ui, sans-serif; font-size: 14.5px;
  font-weight: 500; letter-spacing: -.01em; line-height: 1.35;
}
.side-links a:hover { color: var(--brand-dark); }

/* ---------- team page ---------- */
/* A row of cards, one per person, reading left to right. Each card is a
   column: square headshot on top, name and bio beneath. `align-items:
   stretch` from the grid plus `flex: 1` on the body keeps every card the
   same height however long the bio runs. */
/* The track. A plain horizontal scroll container with snap points, so a
   touch swipe and a trackpad flick both work with no JavaScript at all.
   Three cards visible at a time; the arrows below page by three. */
.people {
  display: flex;
  gap: var(--car-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Room for the lifted card and its shadow, which the scroll container
     would otherwise clip. */
  padding: 4px 4px 14px;
  margin: -4px -4px -14px;
}
.people::-webkit-scrollbar { display: none; }
.people:focus-visible { outline: 2.5px solid var(--brand-dark); outline-offset: 4px; border-radius: var(--r-xl); }

@media (prefers-reduced-motion: reduce) {
  .people { scroll-behavior: auto; }
  .person { transition: none; }
  .person:hover { transform: none; }
}

/* ---- carousel controls ---- */
.carousel { --car-gap: 24px; }

.car-nav {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 26px;
}
.car-btn {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-ink); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); cursor: pointer;
  transition: border-color .18s, color .18s, background .18s, opacity .18s;
}
.car-btn svg {
  width: 19px; height: 19px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.car-btn:hover:not(:disabled) { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--on-brand); }
.car-btn:disabled { opacity: .32; cursor: default; }

.car-dots { display: flex; align-items: center; gap: 9px; }
.car-dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line-2); cursor: pointer;
  transition: background .18s, transform .18s;
}
.car-dot[aria-selected="true"] { background: var(--ink); transform: scale(1.25); }

/* The dot itself has to stay 9px to look right, so the 44px tap target
   comes from a transparent box drawn around it instead. */
.car-dot { position: relative; }
.car-dot::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.person {
  /* Three visible per view. The arrows page by exactly this many. */
  flex: 0 0 calc((100% - var(--car-gap) * 2) / 3);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.person:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.person img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; }
.person-body { padding: 20px 20px 24px; flex: 1; }
.person-body h2 { font-size: 19px; margin: 0 0 5px; letter-spacing: -.03em; }
.person-role {
  font-family: "Inter", system-ui, sans-serif; font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--brand-dark); margin: 0 0 12px;
}
.person-body p { color: var(--ink-2); margin: 0; font-weight: 400; font-size: 15px; line-height: 1.55; }

/* ---------- blog listing ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.post-card { border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.post-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.post-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post-body .post-meta { margin-bottom: 10px !important; }
.post-body h2 { font-size: 21px; line-height: 1.22; margin: 0 0 12px; letter-spacing: -.028em; }
.post-body h2 a { text-decoration: none; }
.post-body h2 a:hover { color: var(--brand-dark); }
.post-body p { color: var(--ink-2); font-size: 16px; font-weight: 400; margin: 0 0 18px; flex: 1; }
.readmore {
  font-family: "Inter", system-ui, sans-serif; font-size: 14.5px; font-weight: 600;
  color: var(--brand-dark); text-decoration: none; letter-spacing: -.01em;
}
.readmore:hover { text-decoration: underline; }

/* ---------- gallery ---------- */
.gallery-grid { margin-top: 0; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery-grid img { aspect-ratio: 3/2; }

/* ---------- contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact-block { margin-bottom: 44px; }
.contact-block:last-child { margin-bottom: 0; }
.contact-block h2 { font-size: 22px; margin: 0 0 12px; letter-spacing: -.03em; }
.contact-block p { color: var(--ink-2); margin: 0 0 12px; font-size: 16.5px; }
.big-link {
  font-family: "Inter", system-ui, sans-serif; font-size: 26px;
  font-weight: 900; letter-spacing: -.03em; margin: 0 0 8px !important;
}
.big-link a { color: var(--brand-dark); text-decoration: none; }
.big-link a:hover { text-decoration: underline; }

.map-placeholder {
  border: 2px dashed var(--line-2); border-radius: var(--r-xl); background: var(--surface-2);
  padding: 40px 24px; text-align: center; margin-top: 18px;
}
.map-placeholder p { margin: 0; color: var(--ink-3); font-size: 14px; line-height: 1.6; }

/* ---------- contact form ---------- */
.cform { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.cform label {
  font-family: "Inter", system-ui, sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-top: 14px;
}
.cform label:first-of-type { margin-top: 0; }
.cform .opt { text-transform: none; letter-spacing: 0; color: var(--ink-3); font-weight: 400; }
.cform input, .cform select, .cform textarea {
  font-family: "Inter", system-ui, sans-serif; font-size: 16.5px;
  padding: 12px 16px; border: 1px solid var(--line-ink); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); width: 100%;
}
.cform input:focus, .cform select:focus, .cform textarea:focus {
  outline: none; border-color: var(--brand-dark); box-shadow: 0 0 0 3px var(--brand-soft);
}
.cform textarea { resize: vertical; }
.cform button { margin-top: 22px; align-self: flex-start; cursor: pointer; border: 0; }


/* ---------- inner page responsive ---------- */
@media (max-width: 950px) {
  .article-grid { grid-template-columns: 1fr; gap: 44px; }
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .posts { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .carousel { --car-gap: 18px; }
  .person { flex-basis: calc((100% - var(--car-gap)) / 2); }
}
@media (max-width: 560px) {
  .pagehead { padding: 36px 0 30px; }
  .posts { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* One column on a phone. A full-width square headshot would be enormous,
     so the card turns on its side: small photo left, text right. */
  .carousel { --car-gap: 14px; }
  .person { flex-basis: 100%; }
  .person { flex-direction: row; align-items: flex-start; }
  .person img { width: 118px; height: 118px; flex: none; aspect-ratio: 1/1; }
  .person-body { padding: 16px 18px 18px; }
  .person-body h2 { font-size: 18px; }
}


/* =====================================================================
   STRUCTURAL HELPERS
   These replace inline style attributes that were repeated across pages.
   ===================================================================== */

/* Alternating grey band with hairlines top and bottom. */
.band {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}


/* The first section after a page header does not need its own top padding. */
.pagehead + section { padding-top: 0; }

/* White tile behind a line icon shown in a photo grid. */
.icon-tile { background: var(--surface); padding: 18px; }

/* Second line of the footer contact block. */
.foot-note { margin-top: 16px; }

/* Section label with a little more room beneath it. */
.sec-lab.spaced { margin-bottom: 20px; }


/* =====================================================================
   TOUCH TARGETS
   On small screens every tappable thing has to be at least 44px tall.
   Text links are inline by default, so their hit area is only as tall
   as the text itself. These rules give them real height.
   ===================================================================== */
@media (max-width: 900px) {

  /* Inline text links that people actually tap */
  .foot .m a,
  .footnav a,
  .side-links a,
  .big-link a,
  .readmore {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.25;
  }

  /* Headings that are links wrap onto several lines, so they keep
     ordinary padding rather than becoming a flex box. */
  .post-body h2 a { display: inline-block; padding-top: 8px; padding-bottom: 8px; }

  .side-links a { padding-top: 12px; padding-bottom: 12px; }

  /* Form controls */
  .cform input,
  .cform select,
  .cform textarea {
    padding-top: 13px;
    padding-bottom: 13px;
  }
  .cform button {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  /* Nav dropdown items */
  .dropmenu a { padding-top: 13px; padding-bottom: 13px; }
}

/* Icons inside the Find Us link list. */