:root{
  --pine-950:#0B2545;
  --pine-800:#13355E;
  --pine-600:#2E6F95;
  --moss-500:#2FA4A9;
  --moss-300:#9FD8DA;
  --amber-500:#5FC9D6;
  --amber-100:#CDEFF2;
  --paper:#F5FAFB;
  --paper-dim:#E9F3F5;
  --ink:#0F2438;
  --ink-soft:#4C6C7D;
  --line:#D5E6EA;
  --radius:2px;
  --max:1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'IBM Plex Sans', sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  line-height:1.08;
  letter-spacing:-0.01em;
  color:var(--pine-950);
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pine-600);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--amber-500);}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}

a:focus-visible, button:focus-visible{outline:2px solid var(--amber-500); outline-offset:3px;}

@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1; transform:none;}
}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(245,250,251,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{
  font-family:'Fraunces', serif; font-weight:600; font-size:21px;
  color:var(--pine-950); display:flex; align-items:center; gap:10px;
}
.logo-mark{
  width:30px; height:30px; border-radius:50%;
  background:conic-gradient(from 220deg, var(--pine-800), var(--moss-500), var(--amber-500), var(--pine-800));
  display:inline-block;
}
.btn{
  font-size:14px; font-weight:600; padding:12px 22px;
  border-radius:var(--radius); border:1px solid transparent;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--pine-950); color:var(--paper);}
.btn-primary:hover{background:var(--pine-800);}
.btn-outline{border-color:var(--moss-300); color:var(--pine-950); background:var(--paper);}
.btn-outline:hover{border-color:var(--pine-950); background:var(--paper-dim);}
.btn-ghost{border-color:var(--pine-950); color:var(--pine-950);}
.btn-ghost:hover{background:var(--pine-950); color:var(--paper);}
.btn svg{flex-shrink:0;}

/* Header: logo (image or box) + name | Home/Info text links + Phone/Maps icons */
.header-left{display:flex; align-items:center; gap:11px;}
.logo-link{display:flex; align-items:center;}
.logo-box{
  width:36px; height:36px; border-radius:9px;
  background:var(--pine-950); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight:600; font-size:15px;
  transition:background .2s ease;
}
.logo-box:hover{background:var(--pine-800);}
.logo-box[hidden]{display:none;}
.logo-image{
  height:46px; width:auto; max-width:220px; object-fit:contain;
}
.logo-text{
  font-family:'Fraunces', serif; font-weight:600; font-size:18px;
  color:var(--pine-950);
}
.header-mid{display:flex; align-items:center; gap:14px;}
.icon-link{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  color:var(--pine-950); transition:background .2s ease;
}
.icon-link:hover{background:var(--paper-dim);}

/* ---------- Important info banner ---------- */
.important-info{
  background:var(--amber-100); border-bottom:1px solid var(--moss-300);
}
.important-info-inner{
  display:flex; align-items:center; gap:14px;
  padding:12px 32px; flex-wrap:wrap;
}
.ii-icon{color:var(--pine-600); flex-shrink:0;}
.ii-text{font-size:14px; color:var(--pine-950); flex:1; min-width:220px;}
.ii-date{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--pine-600);
  margin-right:10px; font-weight:500;
}
.ii-link{
  font-size:13.5px; font-weight:700; color:var(--pine-950);
  text-decoration:underline; text-underline-offset:3px; flex-shrink:0;
}

/* ---------- Hero ---------- */
.hero{
  padding:64px 0 56px;
  background-size:cover; background-position:center; transition:background .3s ease;
}
/* .has-bg-image is shared with .patient-info further down — same photo,
   same overlay treatment, background-attachment:fixed so the mountain
   feels like one continuous backdrop as you scroll from one into the
   other. Note: background-attachment:fixed is unreliable on iOS Safari
   (older versions silently ignore it and just scroll normally) — the
   layout still works fine there, it just loses the fixed-parallax feel. */
.hero.has-bg-image, .patient-info.has-bg-image{
  background-attachment:fixed;
}
.hero.has-bg-image h1{color:#fff;}

.hero-inner{max-width:740px;}
.hero h1{font-size:clamp(34px, 4vw, 52px); margin:0;}

/* Signature element: live status bar — now also holds the 4 quick-action
   buttons (moved here from under the headline). */
.status-bar{
  background:var(--pine-950); color:var(--amber-100);
  border-radius:var(--radius); margin-top:56px;
}
.status-inner{
  display:flex; align-items:center; gap:0;
  flex-wrap:wrap;
}
.status-item{
  padding:22px 26px;
  border-right:1px solid rgba(255,255,255,.12);
}
.status-item:last-child{border-right:none;}
.status-main{
  flex:1 1 0; min-width:220px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.status-actions{
  flex:1 1 0; min-width:280px;
  display:flex; align-items:center; justify-content:center;
}
.status-label{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; opacity:.6; margin-bottom:8px;
}
.status-value{font-size:16px; font-weight:500; display:flex; align-items:center; gap:8px;}
.dot{width:8px; height:8px; border-radius:50%; background:#6FBF8B; flex-shrink:0;}
.dot.closed{background:#D98C5F;}

.status-actions-row{display:grid; grid-template-columns:repeat(2, max-content); gap:10px;}
.status-actions-row .btn{justify-content:center;}
.btn-status{background:#fff; color:var(--pine-950);}
.btn-status:hover{background:var(--paper-dim);}

/* ---------- Services ---------- */
.services{padding:110px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(28px,3vw,38px); margin-top:14px;}
.section-head h2.section-heading-large{margin-top:0;}
.services-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:2px; background:var(--line); border:1px solid var(--line);}
.service-card{background:var(--paper); padding:34px 30px; min-height:220px; display:flex; flex-direction:column;}
.service-card h3{font-size:19px; font-weight:500; margin:14px 0 10px;}
.service-card p{font-size:14.5px; color:var(--ink-soft); flex-grow:1;}
.service-tag{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.08em;
  color:var(--pine-600); text-transform:uppercase;
  border:1px solid var(--moss-300); border-radius:20px; padding:4px 10px;
  width:fit-content;
}

/* ---------- Patient info — now the full-width dark section ---------- */
.patient-info{
  background-color:var(--pine-950); color:var(--paper); padding:170px 0;
  background-size:cover; background-position:center; transition:background .3s ease;
}
.patient-info-eyebrow{color:var(--amber-500);}
.patient-info-eyebrow::before{background:var(--amber-500);}
.patient-info h2{color:var(--paper); font-size:clamp(28px,3vw,38px); margin-top:14px;}
.section-intro{font-size:15.5px; margin-top:10px; max-width:52ch;}
.patient-info .section-intro{color:var(--moss-300);}
.patient-info-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:rgba(255,255,255,.12); margin-top:90px;
}
.pi-card{background:var(--pine-950); padding:26px 24px;}
.pi-card h3{color:var(--paper); font-size:16.5px; font-weight:500; margin-bottom:8px;}
.pi-card p{font-size:14px; color:var(--moss-300); line-height:1.55;}

/* Egenandel card — opaque, sits below the info grid, above the FHI feed */
.egenandel-card{
  background:var(--pine-950); border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius); margin-top:90px; padding:28px 26px;
}
.egenandel-card h3{color:var(--paper); font-size:19px; font-weight:500; margin-bottom:10px;}
.egenandel-note{font-size:14px; color:var(--moss-300); margin-bottom:16px;}
.egenandel-list{display:flex; flex-direction:column; gap:2px; margin-bottom:16px;}
.egenandel-row{
  display:flex; justify-content:space-between; gap:16px;
  padding:10px 0; border-bottom:1px dashed rgba(255,255,255,.15);
  font-size:14.5px; color:var(--paper);
}
.egenandel-row:last-child{border-bottom:none;}
.egenandel-row span:last-child{
  font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--amber-100);
  white-space:nowrap;
}
.egenandel-footnote{font-size:12.5px; color:var(--moss-300); line-height:1.5;}

/* FHI feed — white card floating inside the dark patient-info section,
   items laid out horizontally, newest on the left */
.fhi-feed-card{
  background:var(--paper); color:var(--ink); border-radius:var(--radius);
  margin-top:90px; padding:32px 30px;
}
.fhi-feed-card h3{
  color:var(--pine-950); font-size:19px; font-weight:500; margin-bottom:18px;
}
.fhi-feed-list{
  list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:var(--line); border:1px solid var(--line);
}
.fhi-feed-item{
  background:var(--paper); display:flex; flex-direction:column; gap:8px;
  padding:18px 18px 20px;
}
.fhi-feed-link{
  font-size:14.5px; color:var(--pine-950); font-weight:500; line-height:1.4;
  text-decoration:underline; text-decoration-color:var(--moss-300); text-underline-offset:3px;
}
.fhi-feed-link:hover{text-decoration-color:var(--pine-950);}
.fhi-feed-date{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-soft);
  order:-1;
}
.fhi-feed-note{font-size:12.5px; color:var(--ink-soft); margin-top:16px;}
.fhi-feed-note a{text-decoration:underline; text-underline-offset:2px;}

/* ---------- Hours / Contact — kept deliberately compact ---------- */
.contact{padding:48px 0 72px;}
.section-head-compact{margin-bottom:20px;}
.section-head-compact h2{font-size:clamp(22px,2.2vw,26px); margin-top:6px;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line);}
.contact-card{background:var(--paper); padding:20px 20px;}
.contact-card h3{font-size:12.5px; font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.08em; color:var(--pine-600); font-weight:500; margin-bottom:10px;}
.hours-row{display:flex; justify-content:space-between; font-size:13.5px; padding:5px 0; border-bottom:1px dashed var(--line);}
.hours-row:last-child{border-bottom:none;}
.hours-row span:last-child{font-family:'IBM Plex Mono',monospace; color:var(--ink-soft); font-size:12.5px;}
.contact-card .big{font-family:'Fraunces',serif; font-size:19px; color:var(--pine-950); margin-bottom:4px;}
.contact-card address{font-style:normal; font-size:13.5px; color:var(--ink-soft); line-height:1.5;}
.contact-card-map{display:flex; flex-direction:column;}
.visit-note{font-size:12.5px; color:var(--ink-soft); margin-bottom:8px;}
.map-embed-wrap{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
}
.contact-card-map .map-embed-wrap{flex-grow:1; min-height:180px;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);}
.footer-main-row{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px; padding:32px 32px 20px;
}
.footer-logo{display:flex; align-items:center; gap:10px;}
.footer-logo-image{height:26px; width:auto;}
.footer-logo span{
  font-family:'Fraunces', serif; font-weight:600; font-size:16px; color:var(--pine-950);
}
.footer-fine{font-size:13px; color:var(--ink-soft);}
.footer-legal-row{
  border-top:1px solid var(--line); padding:16px 32px 28px;
}
.footer-links{
  display:flex; gap:22px; list-style:none; font-size:13px; color:var(--ink-soft);
  flex-wrap:wrap;
}
.footer-links a:hover{color:var(--pine-950);}

@media (max-width:900px){
  .header-mid{display:none;}
  .services-grid, .contact-grid, .patient-info-grid, .fhi-feed-list{grid-template-columns:1fr 1fr;}
  .map-embed-wrap{min-height:220px;}
}
@media (max-width:420px){
  .status-actions-row{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .wrap{padding:0 20px;}
  .footer-main-row, .footer-legal-row{padding-left:20px; padding-right:20px;}
  .services-grid, .contact-grid, .patient-info-grid, .fhi-feed-list{grid-template-columns:1fr;}
  .status-item{border-right:none; border-bottom:1px solid rgba(255,255,255,.12);}
  .status-main{flex-basis:100%;}
  .status-actions{flex-basis:100%;}
  .logo-text{display:none;}
  .important-info-inner{padding:10px 20px;}
}