:root{
    --navy:#033659;        /* logo heart, headings */
    --navy-deep:#022A46;
    --slate:#2F3646;       /* dark panels */
    --ice:#D6E3F2;         /* pale panels, original card colour */
    --ice-soft:#EEF2F9;
    --mist:#7592BE;        /* muted blue-grey */
    --ink:#1F2733;
    --ink-soft:#4B5563;
    --white:#FFFFFF;
    --radius-l:12px;
    --radius-m:9px;
    --radius-s:6px;
    --max:1200px;
    --serif:"REM", "Instrument Sans", system-ui, sans-serif;
    --sans:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* The header is sticky and ~79px tall, so every in-page #anchor used to land
     underneath it. Keep the target clear of the header on arrival. */
  html{scroll-behavior:smooth;scroll-padding-top:96px}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
  body{font-family:var(--sans);color:var(--ink);background:var(--white);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  :focus-visible{outline:3px solid var(--mist);outline-offset:3px;border-radius:6px}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
  h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--navy);letter-spacing:-.015em;line-height:1.1;overflow-wrap:break-word}
  h1{font-size:clamp(2rem,3.4vw,2.9rem);font-weight:400}
  h2{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:400}
  h3{font-size:1.2rem;line-height:1.3;font-weight:500}
  p{max-width:62ch}
  .lede{font-size:1rem;color:var(--ink-soft);line-height:1.7}

  /* buttons */
  .btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:600;font-size:1rem;border:1.5px solid transparent;transition:background .2s,color .2s,border-color .2s;cursor:pointer;font-family:var(--sans)}
  .btn svg{width:18px;height:18px;flex:none}
  .btn-primary{background:var(--navy);color:#fff}
  .btn-primary:hover{background:var(--navy-deep)}
  .btn-ghost{background:transparent;color:var(--navy);border-color:rgba(30,58,92,.28)}
  .btn-ghost:hover{border-color:var(--navy);background:rgba(30,58,92,.05)}
  .btn-light{background:#fff;color:var(--navy)}
  .btn-light:hover{background:var(--ice)}

  /* header */
  header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid rgba(30,58,92,.08)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:78px}
  .logo{display:flex;align-items:center}
  .logo img{height:40px;width:auto}
  .nav ul{display:flex;gap:34px;list-style:none}
  .nav ul a{font-size:.98rem;color:var(--ink-soft);padding:6px 0;position:relative}
  .nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .25s}
  .nav ul a:hover{color:var(--navy)}
  .nav ul a:hover::after{transform:scaleX(1)}
  .nav .btn{padding:11px 20px}
  .menu-btn{display:none;background:none;border:0;padding:8px;cursor:pointer}
  .menu-btn span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0;border-radius:2px}
  @media (max-width:960px){
    .nav ul,.nav .btn{display:none}
    .menu-btn{display:block}
    .nav.open ul{display:flex;flex-direction:column;position:absolute;top:78px;left:0;right:0;background:#fff;padding:20px 24px 28px;gap:18px;border-bottom:1px solid rgba(30,58,92,.1)}
  }

  /* hero */
  .hero{padding:44px 0 72px}
  .hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
  .hero-copy p.lede{margin:26px 0 36px;max-width:48ch}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
  .hero-visual{position:relative;min-height:560px}
  .hero-visual .photo{position:absolute;inset:0;border-radius:var(--radius-l);overflow:hidden;background:var(--ice)}
  .hero-visual .photo img{width:100%;height:100%;object-fit:cover;object-position:62% center}
  /* heart-cut corner echoing the logo: two halves */
  .hero-visual .heart{position:absolute;left:-42px;bottom:-30px;width:190px;height:190px;filter:drop-shadow(0 20px 40px rgba(30,58,92,.18))}
  .hero-visual .card{position:absolute;right:24px;top:24px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:var(--radius-m);padding:16px 18px;max-width:260px;font-size:.92rem;color:var(--ink-soft);box-shadow:0 12px 40px rgba(30,58,92,.12)}
  .hero-visual .card strong{display:block;color:var(--navy);font-family:var(--serif);font-size:1.15rem;font-weight:500;margin-bottom:4px}
  .hero-visual .card em{font-style:normal;display:block;margin-top:8px;color:var(--mist);font-size:.82rem}
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .hero-copy > *{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy > *:nth-child(2){animation-delay:.08s}
  .hero-copy > *:nth-child(3){animation-delay:.16s}
  .hero-visual{animation:rise .9s .1s cubic-bezier(.2,.7,.2,1) both}
  @media (max-width:960px){
    .hero{padding:28px 0 56px}
    .hero-grid{grid-template-columns:1fr;gap:40px}
    .hero-visual{min-height:420px}
    .hero-visual .heart{width:140px;height:140px;left:-24px;bottom:-24px}
  }

  /* trust strip */
  .trust{border-top:1px solid rgba(30,58,92,.1);border-bottom:1px solid rgba(30,58,92,.1);background:var(--ice-soft)}
  .trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
  /* `.trust div` also matched `.trust > .wrap` (the wrap is itself a div), which
     overrode .wrap's 0 24px padding and pulled the whole strip flush against the
     left edge of the screen. Scoped to the grid cells only. */
  .trust .wrap > div{padding:28px 20px 28px 0;display:flex;gap:14px;align-items:flex-start}
  .trust .wrap > div + div{padding-left:24px;border-left:1px solid rgba(30,58,92,.12)}
  .trust svg{width:26px;height:26px;flex:none;color:var(--navy);margin-top:2px}
  .trust b{display:block;color:var(--navy);font-weight:600;font-size:1rem}
  .trust small{display:block;color:var(--ink-soft);font-size:.9rem;line-height:1.45;margin-top:2px}
  @media (max-width:960px){
    .trust .wrap{grid-template-columns:1fr 1fr}
    .trust .wrap > div{padding:22px 16px 22px 0}
    .trust .wrap > div + div{padding-left:0;border-left:0}
    .trust .wrap > div:nth-child(even){padding-left:20px;border-left:1px solid rgba(30,58,92,.12)}
  }
  @media (max-width:560px){
    .trust .wrap{grid-template-columns:1fr}
    .trust .wrap > div:nth-child(even){padding-left:0;border-left:0}
    .trust .wrap > div + div{border-top:1px solid rgba(30,58,92,.12)}
    /* single column: keep the row gutters symmetrical inside the wrap */
    .trust .wrap > div{padding-right:0}
  }

  /* section spacing */
  section{padding:104px 0}
  .section-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
  .section-head p{color:var(--ink-soft);font-size:1.08rem}
  @media (max-width:960px){section{padding:72px 0}.section-head{grid-template-columns:1fr;gap:16px;margin-bottom:40px}}

  /* services: a ledger, not three identical cards */
  .services{display:grid;grid-template-columns:.9fr 1.4fr;gap:64px;align-items:start}
  .services-intro{position:sticky;top:110px}
  .services-intro p{color:var(--ink-soft);margin-top:18px;font-size:1.08rem}
  .services-intro .btn{margin-top:28px}
  .ledger{list-style:none;border-top:1px solid rgba(30,58,92,.14)}
  .ledger li{border-bottom:1px solid rgba(30,58,92,.14)}
  .ledger a{display:grid;grid-template-columns:112px 1fr auto;gap:26px;align-items:start;padding:34px 0}
  .ledger .glyph{display:block;width:112px;height:112px;border-radius:16px;overflow:hidden;background:var(--ice);flex:none}
  .ledger .body{display:block;min-width:0}
  .ledger .glyph img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
  .ledger a:hover .glyph img{transform:scale(1.05)}
  .ledger h3{margin-bottom:8px;color:var(--navy)}
  .ledger p{color:var(--ink-soft);max-width:52ch}
  .ledger .arrow{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(30,58,92,.2);display:grid;place-items:center;color:var(--navy);transition:background .2s,color .2s,border-color .2s;margin-top:4px}
  .ledger a:hover .arrow{background:var(--navy);color:#fff;border-color:var(--navy)}
  .ledger .arrow svg{width:18px;height:18px}
  @media (max-width:960px){
    .services{grid-template-columns:1fr;gap:36px}
    .services-intro{position:static}
    .ledger a{grid-template-columns:76px 1fr;gap:16px;padding:26px 0}
    .ledger .glyph{width:76px;height:76px}
    .ledger .arrow{display:none}
  }

  /* manifesto */
  .manifesto{background:var(--navy);color:#fff;position:relative;overflow:hidden}
  .manifesto::before{content:"";position:absolute;right:-140px;top:-160px;width:620px;height:620px;border-radius:50%;background:radial-gradient(closest-side,rgba(220,228,241,.16),transparent 70%)}
  .manifesto .wrap{position:relative;display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center}
  .manifesto h2{color:#fff;font-size:clamp(2.2rem,4.6vw,3.6rem)}
  .manifesto .body p{color:rgba(255,255,255,.82);font-size:1.12rem;line-height:1.7;max-width:56ch}
  .manifesto .body p + p{margin-top:18px}
  .manifesto .body strong{color:#fff;font-weight:600}
  .manifesto .heartline{display:flex;align-items:center;gap:14px;margin-top:30px;color:var(--ice);font-family:var(--serif);font-size:1.3rem}
  .manifesto .heartline svg{width:34px;height:34px;--heart-a:#fff;--heart-b:var(--ice);--heart-c:var(--mist)}
  @media (max-width:960px){.manifesto .wrap{grid-template-columns:1fr;gap:28px}}

  /* two paths */
  .paths{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .path{border-radius:var(--radius-l);padding:0 0 40px;display:flex;flex-direction:column;position:relative;overflow:hidden;min-width:0}
  .path .photo{aspect-ratio:16/9;overflow:hidden}
  .path .photo img{width:100%;height:100%;object-fit:cover}
  .path > h2,.path > p,.path > ul,.path > .btn{margin-left:36px;margin-right:36px}
  .path > h2{margin-top:32px}
  .path.family{background:var(--ice)}
  .path.client{background:var(--slate);color:#fff}
  .path.client h3,.path.client h2{color:#fff}
  .path h2{font-size:clamp(1.6rem,2.4vw,2.1rem);margin-bottom:14px;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
  .path p{margin-bottom:auto;font-size:1.02rem;color:var(--ink-soft);max-width:none}
  .path.client p{color:rgba(255,255,255,.78)}
  .path ul{list-style:none;margin-top:26px;margin-bottom:30px;display:grid;gap:10px;font-size:.95rem}  /* vertical margins only: the `margin` shorthand here used to reset the
     margin-left set by `.path > ul` above, dropping the checkmarks flush
     against the card edge instead of aligning them with the heading. */
  .path li{display:flex;gap:10px;align-items:flex-start}
  .path li svg{width:18px;height:18px;flex:none;margin-top:4px;color:var(--navy)}
  .path.client li svg{color:var(--ice)}
  .path .btn{align-self:flex-start}
  .path .bg{position:absolute;right:-60px;bottom:-70px;width:280px;height:280px;opacity:.5;pointer-events:none}
  .path.client .bg{opacity:.15}
  .path .bg{display:none}
  @media (max-width:960px){.paths{grid-template-columns:1fr}.path{padding-bottom:32px}.path > h2,.path > p,.path > ul,.path > .btn{margin-left:28px;margin-right:28px}}

  /* video / about */
  .about{background:var(--ice-soft)}
  .about .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .about p{color:var(--ink-soft);font-size:1.08rem;margin-top:18px}
  .video{position:relative;aspect-ratio:16/10;border-radius:var(--radius-l);overflow:hidden;background:var(--slate);box-shadow:0 30px 70px rgba(30,58,92,.18)}
  .video img{width:100%;height:100%;object-fit:cover;opacity:.75}
  .video button{position:absolute;inset:0;margin:auto;width:92px;height:92px;border-radius:50%;background:#fff;border:0;display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.25);transition:transform .2s}
  .video button:hover{transform:scale(1.06)}
  .video button svg{width:32px;height:32px;color:var(--navy);margin-left:4px}
  .video .len{position:absolute;left:18px;bottom:16px;background:rgba(255,255,255,.9);color:var(--navy);padding:6px 12px;border-radius:999px;font-size:.85rem;font-weight:600}
  @media (max-width:960px){.about .wrap{grid-template-columns:1fr;gap:36px}}

  /* contact */
  .contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .contact .lede{margin-top:18px}
  .contact-list{list-style:none;margin-top:38px;display:grid;gap:22px}
  .contact-list li{display:flex;gap:16px;align-items:flex-start}
  .contact-list svg{width:24px;height:24px;color:var(--navy);flex:none;margin-top:3px}
  .contact-list b{display:block;font-weight:600;color:var(--navy);font-size:.95rem}
  .contact-list a,.contact-list span{color:var(--ink-soft);font-size:1.02rem}
  .contact-list a:hover{color:var(--navy);text-decoration:underline}
  form{background:var(--ice);border-radius:var(--radius-l);padding:40px}
  form h3{margin-bottom:4px;font-size:1.45rem}
  form .hint{color:var(--ink-soft);font-size:.95rem;margin-bottom:26px}
  .field{margin-bottom:18px}
  .field label{display:block;font-weight:600;font-size:.88rem;color:var(--navy);margin-bottom:6px}
  .field input,.field textarea,.field select{width:100%;border:1.5px solid rgba(30,58,92,.18);background:#fff;border-radius:var(--radius-s);padding:12px 14px;font:inherit;font-size:1rem;color:var(--ink);transition:border-color .2s;appearance:none;-webkit-appearance:none}
  .field select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3A5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px;padding-right:44px}
  .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(30,58,92,.12)}
  .field textarea{min-height:130px;resize:vertical}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  form .btn{width:100%;justify-content:center;margin-top:8px}
  form small{display:block;margin-top:14px;color:var(--ink-soft);font-size:.85rem;text-align:center}
  @media (max-width:960px){.contact .wrap{grid-template-columns:1fr;gap:40px}form{padding:28px}.two{grid-template-columns:1fr}}

  /* footer */
  footer{background:var(--ice-soft);color:var(--ink-soft);padding:72px 0 36px;border-top:1px solid rgba(30,58,92,.1)}
  footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(30,58,92,.12)}
  footer .logo img{height:auto;width:180px}
  footer .brand p{margin-top:16px;font-size:.95rem;max-width:36ch}
  footer h4{color:var(--navy);font-family:var(--sans);font-weight:600;font-size:.95rem;margin-bottom:16px}
  footer ul{list-style:none;display:grid;gap:10px;font-size:.95rem}
  footer ul a:hover{color:var(--navy);text-decoration:underline}
  footer address{font-style:normal;font-size:.95rem;line-height:1.7}
  footer .bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:.85rem;color:var(--mist)}
  @media (max-width:960px){footer .top{grid-template-columns:1fr 1fr}}
  @media (max-width:560px){footer .top{grid-template-columns:1fr}}

/* ---------- subpage components ---------- */
.nav ul a.active{color:var(--navy)}
.nav ul a.active::after{transform:scaleX(1)}
.page-hero{padding:32px 0 0}
.page-hero .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px;align-items:stretch}
.page-hero .panel{background:var(--ice);border-radius:var(--radius-l);padding:56px 48px;display:flex;flex-direction:column;justify-content:center}
.page-hero .panel .eyebrow{font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);margin-bottom:14px}
.page-hero .panel h1{font-size:clamp(2.2rem,4vw,3.4rem);margin-bottom:18px}
.page-hero .panel p{color:var(--ink-soft);font-size:1.12rem;max-width:44ch}
.page-hero .panel .btn{margin-top:28px;align-self:flex-start}
.page-hero .photo{border-radius:var(--radius-l);overflow:hidden;min-height:380px;background:var(--ice-soft)}
.page-hero .photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:960px){.page-hero .grid{grid-template-columns:1fr}.page-hero .panel{padding:36px 28px}.page-hero .photo{min-height:260px}}

.prose{max-width:70ch}
.prose p{color:var(--ink-soft);font-size:1.08rem;line-height:1.7}
.prose p+p{margin-top:18px}
.prose p.strong{color:var(--ink);font-weight:600}
.prose h2{margin-bottom:20px}
.prose h3{margin:34px 0 12px}
.prose ul{margin:14px 0 0 0;padding-left:0;list-style:none;display:grid;gap:10px}
.prose li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft)}
.prose li svg{width:18px;height:18px;flex:none;margin-top:5px;color:var(--navy)}

.statement{text-align:center;max-width:820px;margin:0 auto}
.statement h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.statement h2 span{color:var(--mist);font-weight:400}

.promises{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;border-top:1px solid rgba(30,58,92,.14);border-bottom:1px solid rgba(30,58,92,.14)}
.promises div{padding:34px 26px 34px 0}
.promises div+div{padding-left:26px;border-left:1px solid rgba(30,58,92,.14)}
.promises .num{font-family:var(--serif);font-size:2.2rem;color:var(--mist);line-height:1;margin-bottom:14px;font-weight:500}
.promises h3{font-size:1.15rem;margin-bottom:8px}
.promises p{color:var(--ink-soft);font-size:.96rem;line-height:1.6}
@media (max-width:960px){.promises{grid-template-columns:1fr 1fr}.promises div{padding:24px 18px 24px 0}.promises div+div{padding-left:0;border-left:0}.promises div:nth-child(even){padding-left:18px;border-left:1px solid rgba(30,58,92,.14)}.promises div:nth-child(n+3){border-top:1px solid rgba(30,58,92,.14)}}
@media (max-width:560px){.promises{grid-template-columns:1fr}.promises div:nth-child(even){padding-left:0;border-left:0}.promises div+div{border-top:1px solid rgba(30,58,92,.14)}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.reverse>.photo{order:2}
.split .photo{border-radius:var(--radius-l);overflow:hidden;aspect-ratio:4/3;background:var(--ice)}
.split .photo img{width:100%;height:100%;object-fit:cover}
.split .card{background:var(--ice);border-radius:var(--radius-l);padding:40px}
.split .card h3{margin-bottom:14px}
@media (max-width:960px){.split{grid-template-columns:1fr;gap:32px}.split.reverse>.photo{order:0}}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.duo article{background:var(--ice);border-radius:var(--radius-l);overflow:hidden;display:flex;flex-direction:column}
.duo article header{background:var(--slate);color:#fff;padding:34px 40px}
.duo article header h2{color:#fff;font-size:1.9rem}
.duo article .inner{padding:36px 40px 40px}
.duo article .inner p{color:var(--ink-soft);line-height:1.7}
.duo article .inner p+p{margin-top:16px}
@media (max-width:960px){.duo{grid-template-columns:1fr}.duo article header,.duo article .inner{padding-left:28px;padding-right:28px}}

.criteria{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
.criteria .list{list-style:none;display:grid;gap:12px;margin-top:22px}
.criteria .list li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--ice-soft);border-radius:var(--radius-s);color:var(--ink)}
.criteria .list li svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--navy)}
@media (max-width:960px){.criteria{grid-template-columns:1fr;gap:36px}}

.docs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.docs a{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:var(--radius-m);border:1.5px solid rgba(30,58,92,.14);background:#fff;transition:border-color .2s,transform .2s}
.docs a:hover{border-color:var(--navy);transform:translateY(-2px)}
.docs b{color:var(--navy);font-size:1.05rem;display:flex;justify-content:space-between;align-items:center}
.docs b svg{width:18px;height:18px}
.docs span{color:var(--ink-soft);font-size:.92rem;line-height:1.5}
@media (max-width:960px){.docs{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.docs{grid-template-columns:1fr}}

.quote-block{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.quote-block::before{content:"";position:absolute;left:-160px;bottom:-200px;width:620px;height:620px;border-radius:50%;background:radial-gradient(closest-side,rgba(220,228,241,.14),transparent 70%)}
.quote-block .wrap{position:relative;display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center}
.quote-block h2{color:#fff;font-size:clamp(2rem,4vw,3.2rem)}
.quote-block .sub{margin-top:18px;color:var(--ice);font-family:var(--serif);font-size:1.35rem}
.quote-block .body p{color:rgba(255,255,255,.82);font-size:1.1rem;line-height:1.7}
.quote-block .body p+p{margin-top:16px}
.quote-block .body strong{color:#fff}
@media (max-width:960px){.quote-block .wrap{grid-template-columns:1fr;gap:28px}}

.lists2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.lists2 article{border-radius:var(--radius-l);padding:40px;background:var(--ice)}
.lists2 article.dark{background:var(--slate);color:#fff}
.lists2 article.dark h2{color:#fff}
.lists2 h2{font-size:1.8rem;margin-bottom:8px}
.lists2 .hint{color:var(--ink-soft);margin-bottom:24px}
.lists2 article.dark .hint{color:rgba(255,255,255,.7)}
.lists2 ul{list-style:none;display:grid;gap:0}
.lists2 li{padding:12px 0;border-top:1px solid rgba(30,58,92,.12);display:flex;gap:12px;align-items:flex-start;font-size:1rem}
.lists2 article.dark li{border-color:rgba(255,255,255,.14)}
.lists2 li svg{width:18px;height:18px;flex:none;margin-top:4px;color:var(--navy)}
.lists2 article.dark li svg{color:var(--ice)}
@media (max-width:960px){.lists2{grid-template-columns:1fr}.lists2 article{padding:28px}}

.person{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.person .portrait{border-radius:var(--radius-l);overflow:hidden;aspect-ratio:4/5;background:var(--ice)}
.person .portrait img{width:100%;height:100%;object-fit:cover;object-position:top}
.person .role{color:var(--mist);font-weight:600;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;margin:6px 0 24px}
.person blockquote{margin:26px 0 0;padding-left:20px;border-left:3px solid var(--ice);font-family:var(--serif);font-size:1.25rem;color:var(--navy);line-height:1.45}
@media (max-width:960px){.person{grid-template-columns:1fr;gap:32px}.person .portrait{max-width:420px}}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stats div{background:var(--ice-soft);border-radius:var(--radius-m);padding:28px}
.stats .big{font-family:var(--serif);font-size:2.6rem;color:var(--navy);line-height:1;font-weight:500}
.stats p{color:var(--ink-soft);margin-top:10px;font-size:.98rem}
@media (max-width:960px){.stats{grid-template-columns:1fr}}

.subnav{display:flex;gap:8px;flex-wrap:wrap;margin:36px 0 0}
.subnav a{padding:9px 16px;border-radius:999px;border:1.5px solid rgba(30,58,92,.18);font-size:.92rem;font-weight:600;color:var(--navy);background:#fff}
.subnav a:hover{border-color:var(--navy)}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.values article{background:#fff;border:1.5px solid rgba(30,58,92,.12);border-radius:var(--radius-l);padding:34px}
.values h3{margin-bottom:12px}
.values p{color:var(--ink-soft);line-height:1.65}
@media (max-width:960px){.values{grid-template-columns:1fr}}
.tint{background:var(--ice-soft)}
section.compact{padding:72px 0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media (max-width:960px){.two-col{grid-template-columns:1fr}}
.contact-box{background:var(--ice);border-radius:var(--radius-l);padding:40px}
.contact-box h3{margin-bottom:12px}
.contact-box p{color:var(--ink-soft)}
.contact-box .lines{margin:18px 0;display:grid;gap:6px}
.contact-box .lines a{color:var(--navy);font-weight:600}
.contact-box .lines a:hover{text-decoration:underline}

/* ==========================================================================
   Mobile refinements
   Layered on top of the existing 960/560 breakpoints rather than replacing
   them, so the desktop design is untouched.
   ========================================================================== */

/* Grid children default to min-width:auto, so an unbreakable string (an email
   address, "Familjehemsvård") pushes its column wider than the viewport and
   the whole page scrolls sideways. This is the root cause of the sub-360px
   overflow; everything below is cosmetic by comparison. */
.hero-grid > *,
.section-head > *,
.manifesto .wrap > *,
.about .wrap > *,
.contact .wrap > *,
.page-hero .grid > *,
.split > *,
.duo > *,
.criteria > *,
.lists2 > *,
.person > *,
.stats > *,
.values > *,
.two-col > *,
.paths > *,
.promises > *,
.docs > *,
.trust .wrap > *,
footer .top > *{min-width:0}

/* Long addresses and phone numbers must be allowed to wrap. */
.contact-box .lines a,
.contact-box p,
footer a[href^="mailto:"],
footer a[href^="tel:"],
a[href^="mailto:"],
a[href^="tel:"]{overflow-wrap:anywhere}

@media (max-width:960px){
  /* The open menu was an absolutely-positioned overlay, which floated on top of
     the page content below it. Letting the header grow instead means the menu
     pushes content down and can never overlap it. */
  .nav{flex-wrap:wrap}
  .nav.open{height:auto;min-height:78px;padding-bottom:18px}
  .nav.open ul{
    display:flex;flex-direction:column;position:static;
    order:3;width:100%;gap:0;
    margin-top:10px;padding:6px 0 0;
    border-top:1px solid rgba(30,58,92,.12);background:none;
  }

  /* The primary CTA was display:none below 960px and the open menu only
     revealed the <ul>, so "Kontakta oss" was unreachable on every phone. */
  .nav.open .btn{display:inline-flex;order:4;width:100%;justify-content:center;margin-top:14px}

  /* Comfortable touch targets in the open menu. */
  .nav.open ul a{display:flex;align-items:center;min-height:48px;font-size:1.05rem}
  .nav.open ul a::after{display:none}
  .menu-btn{width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px}
  .menu-btn span{margin:0}
}

@media (max-width:560px){
  h1{font-size:clamp(1.7rem,6.4vw,2.1rem)}
  h2{font-size:clamp(1.45rem,5.2vw,1.7rem)}
  h3{font-size:1.12rem}
  .lede{font-size:1.05rem}

  .stats .big{font-size:2rem;overflow-wrap:anywhere}
  .contact-box{padding:28px 24px}
  .page-hero .panel{padding:28px 22px}
  .path > h2,.path > p,.path > ul,.path > .btn{margin-left:22px;margin-right:22px}
  .duo article header,.duo article .inner{padding-left:22px;padding-right:22px}
  .lists2 article{padding:24px}
  form{padding:24px}

  /* Full-width buttons read as buttons on a phone and clear 44px. */
  .hero-actions{gap:12px}
  .hero-actions .btn{width:100%;justify-content:center}
}

/* Footer link lists are the last sub-44px touch targets on a phone. Widen the
   row gap and give each link a real hit area rather than a 19px line box. */
@media (max-width:960px){
  footer ul{gap:2px}
  footer ul a{display:inline-flex;align-items:center;min-height:44px}
  footer address a{display:inline-flex;align-items:center;min-height:44px}
  footer .bottom{gap:8px}
  footer .bottom a{display:inline-flex;align-items:center;min-height:44px}

  /* tel: and mailto: are the primary conversion actions on a phone -- they
     need to be comfortably tappable wherever they appear. */
  a[href^="tel:"],a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:44px}
  .contact-box .lines{gap:0}
}

@media (max-width:380px){
  .wrap{padding:0 18px}
  .contact-box{padding:24px 18px}
  .stats div{padding:22px}
  .btn{padding:14px 18px;font-size:.95rem}
}

/* ==========================================================================
   Additions: FAQ, ersättning, lediga tjänster, kontakt
   ========================================================================== */

/* Unfilled facts only Familjehemsvården can supply. Deliberately loud so a
   placeholder can never reach production unnoticed. */
.todo{display:inline;background:#FFF4D6;color:#7A5B00;border:1px dashed #C9A227;border-radius:6px;padding:1px 8px;font-size:.92em;font-weight:600}

/* FAQ: native <details>, so it works without JS and stays keyboard accessible */
.faq{display:grid;gap:0;max-width:820px}
.faq details{border-bottom:1px solid rgba(30,58,92,.14)}
.faq details:first-of-type{border-top:1px solid rgba(30,58,92,.14)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--serif);font-size:1.18rem;font-weight:500;color:var(--navy);line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;margin-top:-7px;
  border-right:2.2px solid var(--mist);border-bottom:2.2px solid var(--mist);
  transform:rotate(45deg);transition:transform .25s,border-color .2s;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px;border-color:var(--navy)}
.faq summary:hover{color:var(--navy)}
.faq summary:hover::after{border-color:var(--navy)}
.faq .answer{padding:0 44px 24px 0;color:var(--ink-soft);font-size:1.02rem;line-height:1.7}
.faq .answer p+p{margin-top:14px}
.faq .answer ul{margin:12px 0 0;padding-left:0;list-style:none;display:grid;gap:9px}
.faq .answer li{display:flex;gap:10px;align-items:flex-start}
.faq .answer li svg{width:17px;height:17px;flex:none;margin-top:5px;color:var(--navy)}
.faq-group+.faq-group{margin-top:56px}
.faq-group>h2{margin-bottom:8px}

/* Ersättning: the two components side by side */
.pay{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.pay article{background:var(--ice-soft);border-radius:var(--radius-l);padding:32px}
.pay article.accent{background:var(--ice)}
.pay h3{margin-bottom:10px}
.pay .amount{font-family:var(--serif);font-size:1.9rem;color:var(--navy);line-height:1.15;margin:14px 0 6px;font-weight:500}
.pay p{color:var(--ink-soft);max-width:none}
.pay .note{font-size:.9rem;margin-top:12px}

/* Lediga tjänster */
.jobs{display:grid;gap:16px;max-width:860px}
.job{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
     border:1.5px solid rgba(30,58,92,.16);border-radius:var(--radius-m);padding:26px 28px;transition:border-color .2s,background .2s}
.job:hover{border-color:var(--navy);background:var(--ice-soft)}
.job h3{font-size:1.3rem;margin-bottom:6px}
.job .meta{color:var(--ink-soft);font-size:.95rem}
.job .meta span+span::before{content:"·";margin:0 8px;color:var(--mist)}
.empty-state{background:var(--ice-soft);border-radius:var(--radius-l);padding:40px;max-width:860px}
.empty-state h3{margin-bottom:10px}
.empty-state p{color:var(--ink-soft)}

@media (max-width:960px){
  .pay{grid-template-columns:1fr}
  .job{grid-template-columns:1fr;gap:18px;align-items:start}
}
@media (max-width:560px){
  .faq summary{font-size:1.06rem;padding:18px 38px 18px 0}
  .faq .answer{padding-right:0}
  .pay article,.empty-state{padding:26px 22px}
  .job{padding:22px}
}

/* Headings broke awkwardly at some widths ("Att bli familjehem eller" /
   "jourfamilj"). Balancing distributes words evenly across the lines instead
   of filling greedily, and fixes every such heading at every width rather than
   one at a time with hard breaks. `pretty` just prevents single-word orphans. */
h1,h2,h3,h4,.faq summary{text-wrap:balance}
p,li,.lede,figcaption{text-wrap:pretty}

/* Three-across variant of the promises row (the base grid is four). */
.promises.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){.promises.three{grid-template-columns:1fr}}

/* Contact page detail block */
.lines-block p{max-width:none}
.lines-block strong{color:var(--navy);font-weight:600}
.lines-block a{color:var(--navy);font-weight:600}
.lines-block a:hover{text-decoration:underline}

/* The hero heart straddles the photo edge, so its dark half used to disappear
   into whatever the photo happens to show there. A faint white rim separates
   the mark from the image without changing the intended overlap. */
.hero-visual .heart{
  filter:drop-shadow(0 20px 40px rgba(30,58,92,.18))
         drop-shadow(0 0 2px rgba(255,255,255,.95))
         drop-shadow(0 0 6px rgba(255,255,255,.55));
}

/* Footer column headings moved from h4 to h3 so they no longer skip a level
   after a section's h2. Keep the original footer type size. */
footer .top h3{color:var(--navy);font-family:var(--sans);font-weight:600;font-size:.95rem;margin-bottom:16px;line-height:1.3}

/* The legal links in the footer bottom bar sat in a plain span, so they ran
   together as one string: "Vision och värdegrundLämna synpunkterIntegritetspolicy".
   Space them properly and let them wrap as a group. */
footer .bottom{align-items:center}
footer .bottom .legal{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px}
footer .bottom .legal a{color:var(--mist);white-space:nowrap}
footer .bottom .legal a:hover{color:var(--navy);text-decoration:underline}

@media (max-width:960px){
  /* Stack the three groups instead of squeezing them onto one row. */
  footer .bottom{flex-direction:column;align-items:flex-start;gap:2px}
  footer .bottom .legal{gap:0 20px;margin:6px 0}
}

@media (max-width:560px){
  /* Three legal links wrapped 2-then-1, which read as ragged. One per row is
     tidier and gives each a full-width tap target. */
  footer .bottom .legal{flex-direction:column;align-items:flex-start;gap:0}
}

/* At 1440px and up the hero headline was 67px inside a 551px column, about
   eight characters per line, so it broke to three lines and stranded the last
   word ("Familjehemsvård / på barnets / villkor."). Slightly more room for the
   copy and a slightly lower cap gives two clean lines, and holds for a longer
   headline too. Below 1280px nothing changes. */
@media (min-width:961px){
  .hero-grid{grid-template-columns:1.2fr 1fr}
  .hero h1{font-size:clamp(2.5rem,5.2vw,3.8rem)}
}

/* The heart sat on top of the photo and read as a sticker: an opaque mark
   covering the image at its own corner. Replaced with shapes that sit behind
   the photo, so the hero gets depth without anything obscuring the picture. */
.hero-visual .heart{display:none}

.hero-visual::before,
.hero-visual::after{content:"";position:absolute;z-index:0;pointer-events:none}

/* Offset panel peeking out at the bottom left, echoing the card radius. */
.hero-visual::before{
  left:-34px;bottom:-30px;width:58%;height:54%;
  background:var(--ice);border-radius:var(--radius-l);
}
/* Soft brand glow behind the top right corner. */
.hero-visual::after{
  right:-46px;top:-34px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(117,146,190,.30),rgba(117,146,190,0) 70%);
}
.hero-visual .photo{z-index:1}
.hero-visual .card{z-index:2}

@media (max-width:960px){
  /* Keep the shapes inside the viewport on narrow screens. */
  .hero-visual::before{left:-16px;bottom:-16px;width:52%;height:46%}
  .hero-visual::after{right:-18px;top:-18px;width:150px;height:150px}
}
@media (max-width:560px){
  .hero-visual::before{left:-10px;bottom:-12px}
  .hero-visual::after{right:-10px;top:-12px;width:120px;height:120px}
}

/* ==========================================================================
   v2 design language
   Rebuilt toward familjehemsvarden.se's own look: contained blocks on white,
   pale ice surfaces, tight radii, circular arrow links, centered section
   headings, and the wave.
   ========================================================================== */

body{background:#fff}

/* --- the wave -------------------------------------------------------------
   His version is wave_680px.webp, a fixed raster laid over the photo, so it
   cannot adapt to the viewport. Traced off that asset and rebuilt as a
   clipPath in objectBoundingBox units: one shape, any size, no image request,
   fill from the brand token. Max deviation from his curve is 0.42% of width. */
.hero{padding:26px 0 0}
.hero-frame{
  position:relative;border-radius:var(--radius-l);overflow:hidden;
  min-height:420px;background:var(--ice-soft);
}
.hero-photo{position:absolute;inset:0;z-index:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:60% center}
.hero-panel{
  position:relative;z-index:1;width:58%;min-height:420px;
  background:var(--ice);
  -webkit-clip-path:url(#waveClip);clip-path:url(#waveClip);
  display:flex;flex-direction:column;justify-content:center;
  /* The curve's narrowest point is 73.4% across the panel, so the right
     padding has to clear that plus breathing room. Constraining the children
     with a percentage instead broke "Familjehemsvard" mid-word. */
  /* Percentage padding resolves against the containing block, not the panel.
     The curve needs 26.6% of the PANEL clear; the panel is 58% of the frame,
     so that is 15.4% of the frame. 18% leaves breathing room. */
  padding:52px 18% 52px 56px;
}
.hero-panel > *{max-width:none}
.hero-panel h1{margin-bottom:18px;font-size:clamp(1.9rem,2.5vw,2.45rem);overflow-wrap:normal}
.hero-panel .lede{margin-bottom:28px}

/* --- circular arrow links, his primary call to action --------------------- */
.arrow-link{
  display:inline-flex;align-items:center;gap:14px;
  font-size:.95rem;font-weight:500;color:var(--navy);line-height:1.4;
}
.arrow-link .dot{
  flex:none;width:34px;height:34px;border-radius:50%;
  border:1.5px solid rgba(3,54,89,.35);
  display:grid;place-items:center;transition:background .2s,border-color .2s;
}
.arrow-link .dot svg{width:15px;height:15px;color:var(--navy)}
.arrow-link:hover .dot{background:var(--navy);border-color:var(--navy)}
.arrow-link:hover .dot svg{color:#fff}

/* --- buttons: flatter and quieter than v1's filled pills ------------------ */
.btn{border-radius:var(--radius-m);padding:13px 22px;font-size:.95rem;font-weight:500}
.btn-ghost{border-color:rgba(3,54,89,.3)}

/* --- sections: contained blocks floating on white ------------------------- */
section{padding:64px 0}
.block{background:var(--ice);border-radius:var(--radius-l);padding:48px 56px}
.block-soft{background:var(--ice-soft)}
section.tint{background:transparent}

/* --- centered section headings, as on his site --------------------------- */
.section-head{
  grid-template-columns:1fr;justify-items:center;text-align:center;
  gap:12px;margin-bottom:40px;
}
.section-head p{max-width:62ch}

@media (max-width:960px){
  /* Stacked, so the curve turns horizontal along the shared edge instead of
     being dropped the way his mobile layout drops it. */
  .hero-frame{min-height:0;display:flex;flex-direction:column-reverse}
  .hero-photo{position:relative;height:260px}
  .hero-panel{
    width:100%;min-height:0;
    /* the curve now cuts to 88% height, so the bottom padding has to clear
       12/88 of the content above it */
    padding:34px 26px 74px;
    -webkit-clip-path:none;clip-path:none;
    margin-bottom:-28px;
  }
  .hero-panel.curved{-webkit-clip-path:url(#waveClipV);clip-path:url(#waveClipV)}
  .hero-panel > *,.hero-panel .lede{max-width:none}
  .block{padding:32px 26px}
  section{padding:48px 0}
}
@media (max-width:560px){
  .hero-panel{padding:28px 22px 46px}
  .block{padding:26px 20px}
}

/* Hero calls to action stack, as they do on his site */
.hero .hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}

/* --- no dark surfaces ------------------------------------------------------
   His site is white and pale ice throughout. v1's full-bleed navy and slate
   bands become contained ice blocks so the page reads as his. */

/* Manifesto: was a full-bleed navy band */
.manifesto{background:transparent;color:inherit}
.manifesto .wrap{
  background:var(--ice);border-radius:var(--radius-l);
  padding:52px 56px;align-items:start;
}
/* v1 sized this for a full-bleed navy band (up to 3.6rem). Inside a contained
   ice block on the smaller v2 scale it needs to come down. */
.manifesto h2{color:var(--navy);font-size:clamp(1.6rem,2.6vw,2.1rem)}
.manifesto .body p{color:var(--ink-soft)}
.manifesto .body p strong{color:var(--navy)}
.manifesto .heartline{color:var(--navy)}
/* v1 recoloured the heart white for the navy band, which left it invisible on
   ice. Back to the logo's own colours. */
.manifesto .heartline svg{--heart-a:var(--navy);--heart-b:var(--mist);--heart-c:#8FA9CF}
.manifesto .bg,.manifesto::before,.manifesto::after{display:none}

/* Two paths: his shows both as pale ice panels with an arrow link */
.path{background:var(--ice-soft)}
.path.family{background:var(--ice)}
.path.client{background:var(--ice);color:inherit}
.path.client h2,.path.client h3{color:var(--navy)}
.path.client p{color:var(--ink-soft)}
.path.client li svg{color:var(--navy)}
.path .btn-light{background:transparent;color:var(--navy);border:1.5px solid rgba(3,54,89,.3)}
.path .btn-light:hover{background:rgba(3,54,89,.06)}

/* About / video block sits in an ice panel too */
.about{background:transparent}
.about .wrap{background:var(--ice-soft);border-radius:var(--radius-l);padding:48px 56px}

/* Contact block */
.contact{background:transparent}
.contact .wrap{background:var(--ice);border-radius:var(--radius-l);padding:48px 56px}
.contact form{background:#fff;border-radius:var(--radius-m)}

/* Trust strip: a light band rather than a tinted full-bleed row */
/* The block's own padding replaced .wrap's 24px page gutter, so the ice
   painted the full 1200px border box while the hero sat inside at 1152 and
   the strip overhung it by 24px a side. Move the gutter onto .trust and cap
   the block at the hero's content width. */
.trust{background:transparent;border:0;padding:0 24px;margin-top:28px}
.trust .wrap{
  background:var(--ice-soft);border-radius:var(--radius-l);
  max-width:calc(var(--max) - 48px);
  padding:26px 34px;
}
.trust .wrap > div{padding:14px 20px 14px 0}
.trust .wrap > div + div{border-left:1px solid rgba(3,54,89,.12);padding-left:24px}

/* Inner pages are a different matter. His homepage has no dark surfaces, but
   his inner pages do: Handledning and Utbildning are dark navy panels on
   "For familjehem", and Kvalitet, Jobba hos oss and Synpunkter are dark bands
   on "Kvalitet". Those keep v1's dark treatment, which already matched him. */
.quote-block{background:transparent}
.quote-block .wrap{background:var(--navy);border-radius:var(--radius-l);padding:48px 56px}
.page-hero .panel{background:var(--ice)}

@media (max-width:960px){
  .manifesto .wrap,.about .wrap,.contact .wrap,.quote-block .wrap{padding:32px 26px}
  .trust .wrap{padding:18px 22px}
  .trust .wrap > div + div{border-left:0;padding-left:0}
  .trust{margin-top:20px}
}
@media (max-width:560px){
  .manifesto .wrap,.about .wrap,.contact .wrap,.quote-block .wrap{padding:26px 20px}
}

/* --- "Det vi gor, varje dag" as his three photo-topped cards ---------------
   v1 laid this out as an intro column beside a vertical list. His equivalent
   is an intro above a row of cards, each with the photo on top and a circular
   arrow by the title. Done in CSS so the markup stays shared with v1. */
.services{display:block}
.services-intro{
  /* v1 made this a sticky sidebar. Stacked above the cards it must not stick,
     or it floats over them. */
  position:static;
  text-align:center;max-width:64ch;margin:0 auto 40px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.services-intro .btn{margin-top:6px}
.services-intro p{max-width:none}

.ledger{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  border-top:0;list-style:none;
}
.ledger li{border-bottom:0}
.ledger a{
  display:block;padding:0;height:100%;
  background:#fff;border:1px solid rgba(3,54,89,.12);
  border-radius:var(--radius-l);overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.ledger a:hover{border-color:rgba(3,54,89,.3);box-shadow:0 10px 30px rgba(3,54,89,.07)}
.ledger .glyph{
  display:block;width:100%;height:170px;border-radius:0;
  background:var(--ice);
}
.ledger .body{display:block;padding:24px 26px 0}
.ledger h3{margin-bottom:10px}
.ledger p{font-size:.95rem;max-width:none}
.ledger .arrow{
  width:34px;height:34px;margin:18px 26px 26px;
  border-color:rgba(3,54,89,.3);
}
.ledger a:hover .arrow{background:var(--navy);color:#fff;border-color:var(--navy)}
.ledger .arrow svg{width:15px;height:15px}

@media (max-width:960px){
  .ledger{grid-template-columns:1fr 1fr;gap:18px}
  .services-intro{margin-bottom:30px}
}
@media (max-width:640px){
  .ledger{grid-template-columns:1fr}
  .ledger .glyph{height:150px}
}

/* --- the wave on inner page heroes ----------------------------------------
   His "Om oss" hero uses the same curve as the homepage, so the page heroes
   get it too rather than the plain two-column split v1 used. Same overlay
   approach: photo fills the frame, ice panel clipped on top. */
/* The page heroes use <div class="wrap grid">, so the frame IS the wrap and
   its background painted the full 1200px border box while every block below
   sat inside the 24px gutter at 1152px. The banner was 24px wider a side on
   every page, and ran edge to edge on mobile. Same fix as the trust strip:
   gutter on the section, frame capped at the content width. */
.page-hero{padding:26px 24px 0}
.page-hero .grid{
  max-width:calc(var(--max) - 48px);
  /* .grid is also a .wrap, which carries padding:0 24px. The panel is in
     flow so it sat 24px in from the frame's left edge while the absolutely
     positioned photo reached the edge, leaving a pale ice-soft strip down
     the left of every hero. The page gutter lives on .page-hero now, so the
     frame itself needs none. */
  padding:0;
}
.page-hero .grid{
  position:relative;display:block;
  border-radius:var(--radius-l);overflow:hidden;
  min-height:340px;background:var(--ice-soft);
}
/* The photo used to span the whole frame. At 1152x340 that is 3.4:1 while the
   photos are about 1.5:1, so cover scaled them to fill the WIDTH and cropped
   vertically, which meant object-position had no horizontal effect and the
   visible right 42% always landed on whatever happened to be at the photo's
   right edge: an arm, a torso, a cut-off head. Confining the box to the area
   the panel does not cover makes cover crop horizontally instead, so each
   photo can be aimed. */
.page-hero .photo{
  position:absolute;top:0;bottom:0;right:0;left:38%;z-index:0;
  min-height:0;border-radius:0;
}
.page-hero .photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.page-hero .panel{
  position:relative;z-index:1;width:58%;min-height:340px;
  background:var(--ice);border-radius:0;
  -webkit-clip-path:url(#waveClip);clip-path:url(#waveClip);
  display:flex;flex-direction:column;justify-content:center;
  padding:46px 18% 46px 56px;
}
/* Same as the homepage hero: the base h1 rule sets overflow-wrap:break-word,
   which split "personuppgifter." mid-word inside the narrow clipped column. */
.page-hero .panel h1{margin-bottom:14px;font-size:clamp(1.8rem,2.3vw,2.25rem);overflow-wrap:normal}
.page-hero .eyebrow{margin-bottom:10px}

@media (max-width:960px){
  /* The homepage puts .hero-photo before .hero-panel and reverses; the page
     heroes already have .panel first, so plain column gives the same result:
     panel on top, photo below, curve on the edge they share. */
  .page-hero .grid{min-height:0;display:flex;flex-direction:column}
  /* The desktop rule offsets the photo with left:38%. Once position goes
     relative that offset shifts the element sideways instead of insetting it,
     so it has to be cleared or the photo hangs half outside the frame. */
  .page-hero .photo{position:relative;left:0;height:220px}
  .page-hero .panel{
    width:100%;min-height:0;padding:30px 26px 66px;margin-bottom:-24px;
    -webkit-clip-path:url(#waveClipV);clip-path:url(#waveClipV);
  }
}
@media (max-width:560px){
  .page-hero .panel{padding:26px 22px 58px}
}

/* Artiklar ---------------------------------------------------------------- */
.artikel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 28px}
.artikel-grid.two{grid-template-columns:repeat(2,1fr);max-width:780px}
.artikel-card{display:flex;flex-direction:column;color:inherit}
.artikel-card .photo{display:block;aspect-ratio:3/2;border-radius:var(--radius-m);overflow:hidden;background:var(--ice);margin-bottom:16px}
.artikel-card .photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.artikel-card:hover .photo img{transform:scale(1.04)}
.artikel-card .meta{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);font-weight:600}
.artikel-card h3{margin:8px 0;font-size:1.28rem;transition:color .2s}
.artikel-card:hover h3{color:var(--mist)}
.artikel-card p{color:var(--ink-soft);font-size:.97rem;line-height:1.62;max-width:none}
@media (max-width:960px){.artikel-grid,.artikel-grid.two{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.artikel-grid,.artikel-grid.two{grid-template-columns:1fr}}

.article-body h2{font-size:1.45rem;margin:42px 0 14px}
.article-body > :first-child{margin-top:0}
.article-body a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.article-body a:hover{color:var(--mist)}
.more-head{font-size:1.35rem;margin-bottom:26px}

/* --- mobile UI corrections ------------------------------------------------ */

/* The card titles moved from h3 to h2 to stop the heading order skipping a
   level after the page h1. Keep the type identical. */
.artikel-card h2{margin:8px 0;font-size:1.28rem;transition:color .2s;line-height:1.3}

@media (max-width:960px){
  /* A single-line arrow link was 34px tall, under the 44px touch target, and
     these are the hero's primary calls to action. */
  .arrow-link{min-height:44px}
  /* The integritetspolicy link in the form fine print was a 16px tap target. */
  form small a{display:inline-block;padding:14px 2px;line-height:1.2}
}


/* The header logo read louder than the nav beside it. Shrinking the mark
   also shrank its link, so the tap area is restored separately: the nav row
   is 78px tall, so there is room for a 44px target around a 32px logo. */
.nav .logo img{height:32px}
.nav .logo{min-height:44px}
@media (max-width:560px){
  .nav .logo img{height:28px}
}
@media (max-width:380px){
  /* .wrap only narrows its gutter to 18px here, so the hero must match at the
     same breakpoint or the banner sits 6px wider than the content below. */
  .page-hero{padding-left:18px;padding-right:18px}
}

/* ==========================================================================
   Go-live pass, September 2026
   ========================================================================== */

/* --- "Det vi gör, varje dag": left-aligned head, photo cards --------------
   The centred heading, centred paragraph and ghost button stacked above
   three identical bordered boxes read as a template. The heading now sits
   left with the text and link beside it, and the cards lose their frame:
   a numbered photo, the arrow riding on its corner, the text below. */
.services-intro{
  text-align:left;max-width:none;margin:0 0 44px;
  display:grid;grid-template-columns:1fr 1fr;gap:28px 64px;align-items:end;
}
.services-intro h2{font-size:clamp(1.9rem,3.2vw,2.6rem)}
.services-intro p{margin:0 0 18px;font-size:1.05rem}
.kicker{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);
}
.kicker svg{width:20px;height:20px}

.ledger{gap:28px}
.ledger a{border:0;border-radius:0;background:transparent;overflow:visible;position:relative;display:flex;flex-direction:column;gap:0}
.ledger a:hover{box-shadow:none}
.ledger .glyph{
  position:relative;height:auto;aspect-ratio:3/2;border-radius:var(--radius-l);overflow:hidden;
}
.ledger a:hover .glyph img{transform:scale(1.04)}
.ledger .body{padding:20px 2px 0}
.ledger h3{font-size:1.3rem;transition:color .2s}
.ledger a:hover h3{color:var(--mist)}
.ledger .arrow{
  position:absolute;right:14px;top:14px;margin:0;
  width:44px;height:44px;background:#fff;border:0;
  box-shadow:0 6px 18px rgba(3,54,89,.18);
}
.ledger a:hover .arrow{background:var(--navy);color:#fff}
@media (max-width:960px){
  .services-intro{grid-template-columns:1fr;gap:6px;margin-bottom:32px}
}
@media (max-width:640px){
  .ledger .glyph{height:auto;aspect-ratio:16/10}
  .ledger .arrow{display:grid}
}

/* --- the film ----------------------------------------------------------- */
.film-link{
  display:inline-flex;align-items:center;gap:14px;margin-top:26px;
  padding:8px 18px 8px 8px;border-radius:var(--radius-l);
  background:rgba(255,255,255,.7);color:var(--navy);
  transition:background .2s,box-shadow .2s;
}
.film-link:hover{background:#fff;box-shadow:0 8px 24px rgba(3,54,89,.12)}
.film-link .thumb{position:relative;flex:none;width:84px;height:56px;border-radius:var(--radius-s);overflow:hidden;background:var(--slate)}
.film-link .thumb img{width:100%;height:100%;object-fit:cover;opacity:.8}
.film-link .play{
  position:absolute;inset:0;margin:auto;width:30px;height:30px;border-radius:50%;
  background:#fff;display:grid;place-items:center;color:var(--navy);
  transition:transform .2s;
}
.film-link:hover .play{transform:scale(1.1)}
.film-link .play svg{width:14px;height:14px;margin-left:2px}
.film-link .txt{display:flex;flex-direction:column;line-height:1.3}
.film-link b{font-weight:600;font-size:.95rem}
.film-link small{color:var(--ink-soft);font-size:.82rem}

.video .play-btn{position:absolute;inset:0;margin:auto;width:92px;height:92px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.25);transition:transform .2s}
.video .play-btn:hover{transform:scale(1.06)}
.video .play-btn svg{width:32px;height:32px;color:var(--navy);margin-left:4px}

dialog.film{
  /* the global *{margin:0} reset strips the auto margin that centres a modal */
  margin:auto;width:min(1100px,calc(100vw - 32px));max-width:none;padding:0;border:0;
  background:#000;border-radius:var(--radius-l);overflow:visible;
}
dialog.film::backdrop{background:rgba(2,22,38,.82)}
.film-frame{aspect-ratio:16/9}
.film-frame iframe{display:block;width:100%;height:100%;border:0;border-radius:var(--radius-l)}
.film-close{
  position:absolute;right:0;top:-54px;width:44px;height:44px;border-radius:50%;
  border:0;background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;
}
.film-close svg{width:20px;height:20px}

/* --- forms -------------------------------------------------------------- */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-status{
  margin:4px 0 12px;padding:12px 14px;border-radius:var(--radius-s);
  background:#FBEAEA;color:#8A1F1F;font-size:.92rem;
}
.form-done{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:12px 0;outline:none}
.form-done .tick{width:52px;height:52px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center}
.form-done .tick svg{width:24px;height:24px}
.form-done h3{font-size:1.4rem}
.form-done p{color:var(--ink-soft)}
.form-done a{color:var(--navy);font-weight:600;white-space:nowrap}
form button[disabled]{opacity:.65;cursor:progress}

/* The "Bli familjehem" form rides along while the criteria scroll past. */
@media (min-width:961px){
  .criteria > form{position:sticky;top:104px}
}

/* --- navy quote block carries the logo heart ----------------------------
   Whole and small above the heading, where it reads as the logo. A large
   cropped watermark read as a blur and sat behind the text on mobile. */
.quote-block .qb-heart{
  display:block;width:44px;height:44px;margin-bottom:20px;
  --heart-a:#fff;--heart-b:var(--ice);--heart-c:var(--mist);
}

/* --- side-by-side contact boxes share a height, buttons on one line ------ */
.two-col:has(> .contact-box){align-items:stretch}
.two-col > .contact-box{display:flex;flex-direction:column}
.two-col > .contact-box > :last-child{margin-top:auto;padding-top:18px}

/* --- articles: a column on the right ------------------------------------ */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:72px;align-items:start}
.article-layout .prose{max-width:68ch}
.article-aside{position:sticky;top:104px;display:flex;flex-direction:column;gap:18px}
.toc{border-left:2px solid var(--ice);padding:4px 0 4px 18px}
.toc-head{display:block;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);margin-bottom:10px}
.toc ol{list-style:none;display:grid;gap:8px}
.toc a{color:var(--ink-soft);font-size:.94rem;line-height:1.4}
.toc a:hover{color:var(--navy)}
.aside-card{position:relative;overflow:hidden;background:var(--ice);border-radius:var(--radius-l);padding:28px 26px}
.aside-card > *{position:relative}
.aside-card .aside-heart{position:absolute;right:-34px;top:-30px;width:130px;height:130px;opacity:.22}
.aside-card h2{font-size:1.3rem;margin-bottom:10px;max-width:14em}
.aside-card p{color:var(--ink-soft);font-size:.95rem;margin-bottom:20px}
.aside-card .btn{width:100%;justify-content:center}
.aside-phone{display:block;text-align:center;margin-top:12px;color:var(--navy);font-weight:500;font-size:.92rem}
.aside-phone:hover{text-decoration:underline}
.aside-film{margin-top:0;background:var(--ice-soft)}
.article-body h2{scroll-margin-top:100px}
@media (max-width:960px){
  .article-layout{grid-template-columns:1fr;gap:40px}
  .article-aside{position:static}
  .toc{display:none}
}

/* --- cookie consent ------------------------------------------------------
   A quiet card in the corner rather than a wall across the page. The two
   answers look the same on purpose: saying no must be as easy as yes. */
.consent{
  position:fixed;left:16px;bottom:16px;z-index:60;
  width:min(440px,calc(100vw - 32px));
  background:#fff;border:1px solid rgba(3,54,89,.14);border-radius:var(--radius-l);
  box-shadow:0 16px 40px rgba(3,54,89,.16);padding:20px 22px;
}
.consent[hidden]{display:none}
.consent p{font-size:.92rem;color:var(--ink-soft);line-height:1.55}
.consent p b{color:var(--navy);font-weight:600}
.consent p a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.consent-actions .btn{justify-content:center;min-height:44px;padding:10px 14px}

/* The film link must shrink with a narrow hero panel instead of running past it. */
.film-link{max-width:100%}
.film-link .txt{min-width:0}

/* Articles written in the portal: numbered lists, quotes and the source list
   the static articles never needed. */
.prose ol{margin:14px 0 0 1.25em;padding-left:0;display:grid;gap:10px;color:var(--ink-soft)}
.prose ol li{display:list-item;padding-left:4px}
.prose blockquote{margin:26px 0;padding:4px 0 4px 20px;border-left:3px solid var(--ice)}
.prose blockquote p{color:var(--ink);font-style:italic}
.article-body .kallor{margin-top:48px;padding-top:24px;border-top:1px solid var(--ice)}
.article-body .kallor h2{font-size:1.05rem;margin:0 0 12px}
.article-body .kallor ol{margin:0 0 0 1.25em;gap:8px;font-size:.95rem}
.article-body .kallor small{display:block;color:var(--mist);font-size:.85rem}

/* --- one hero, every page -------------------------------------------------
   The banners were 340 to 518px tall depending on how much text and how many
   buttons each held, and the panel centred its text, so the headline moved
   up and down from page to page. Every hero now has the size of the one on
   För uppdragsgivare, with the text starting from the same top edge and no
   buttons in it. */
.hero-frame,.page-hero .grid{height:410px;min-height:0}
.hero-panel,.page-hero .panel{
  height:100%;min-height:0;justify-content:flex-start;
  padding-top:46px;padding-bottom:46px;
}
.hero-panel .eyebrow{font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);margin-bottom:10px}
.hero-panel h1,.page-hero .panel h1{margin-bottom:14px;font-size:clamp(1.8rem,2.3vw,2.25rem)}
.hero-panel .lede,.page-hero .panel p{margin:0;font-size:1.12rem;max-width:44ch}

/* Full width, straight under the menu: no gutter, no gap above, no corners.
   The text keeps the content column's left edge, so it lines up with the
   headings below, with 56px as the floor on narrower screens. */
.hero,.page-hero{padding:0}
.hero > .wrap{max-width:none;padding:0}
.hero-frame,.page-hero .grid{max-width:none;border-radius:0}
.hero-panel,.page-hero .panel{padding-left:max(56px,calc((100% - var(--max)) / 2 + 24px))}

@media (max-width:960px){
  /* Stacked, the frame keeps one fixed height and the photo takes what the
     text leaves, so the next section starts at the same place on every page. */
  .hero-frame,.page-hero .grid{height:556px}
  .hero-panel,.page-hero .panel{
    flex:none;height:auto;min-height:0;padding-top:30px;padding-left:24px;padding-right:24px;margin-bottom:-24px;
  }
  .hero-photo,.page-hero .photo{flex:1 1 0;height:auto;min-height:0}
}
@media (max-width:560px){
  .hero-panel,.page-hero .panel{padding-top:26px}
}
@media (max-width:380px){
  .hero-frame,.page-hero .grid{height:606px}
  .page-hero{padding:0}
  .hero-panel,.page-hero .panel{padding-left:18px;padding-right:18px}
}

/* The services section lost its kicker, intro and link, so the heading
   stands alone above the cards and centres over them. */
.services-intro{display:block;text-align:center}
.services-intro p{margin:12px auto 0;max-width:64ch;font-size:1.05rem;color:var(--ink-soft)}

/* --- the film in the start page hero --------------------------------------
   Only the start page: a frame from the film with a play button under the
   intro, so its hero is taller than the others'. */
.hero-frame{height:540px}
.hero-film{display:flex;align-items:center;gap:18px;margin-top:28px;color:var(--navy);align-self:flex-start}
.hero-film .frame{
  position:relative;flex:none;width:220px;aspect-ratio:16/9;
  border-radius:var(--radius-m);overflow:hidden;background:var(--slate);
  box-shadow:0 10px 26px rgba(3,54,89,.18);
}
.hero-film .frame img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.hero-film .play{
  position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;
  background:#fff;color:var(--navy);display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);transition:transform .2s;
}
.hero-film .play svg{width:20px;height:20px;margin-left:3px}
.hero-film:hover .play{transform:scale(1.08)}
.hero-film:hover .frame img{transform:scale(1.04)}
.hero-film .txt{display:flex;flex-direction:column;line-height:1.35}
.hero-film b{font-weight:600;font-size:1rem}
.hero-film small{color:var(--ink-soft);font-size:.86rem}
@media (max-width:960px){
  .hero-frame{height:760px}
  .hero-film .frame{width:150px}
  .hero-film .play{width:42px;height:42px}
  .hero-film .play svg{width:16px;height:16px}
}
@media (max-width:380px){
  .hero-frame{height:800px}
}

/* Adda logo at the bottom of the footer Kontakt column. */
footer .accreditations{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px}
footer .accreditations a{display:inline-flex;align-items:center;min-height:44px}
footer .accreditations img{height:32px;width:auto}
footer .bottom > a{color:var(--mist)}
footer .bottom > a:hover{color:var(--navy);text-decoration:underline}

/* The photographer's credit on a cover picked from Unsplash, which their terms require. */
/* .page-hero .photo is already positioned (absolute on desktop, relative
   stacked), so it anchors the credit without a rule of its own. */
.photo-credit{position:absolute;right:10px;bottom:10px;font-size:.72rem;line-height:1.3;color:#fff;background:rgba(3,54,89,.6);padding:3px 9px;border-radius:6px}
.photo-credit a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* --- every contained block on the content column ---------------------------
   The film, contact and quote blocks put their own padding where .wrap's
   gutter was, so they painted the full 1200px box and stood 24px wider a
   side than everything else; the bands on Ersättning, Lediga tjänster and
   Integritetspolicy ran edge to edge. Same fix as the trust strip had: the
   gutter moves to the section and the block is capped at the content width. */
.about,.contact,.quote-block,.band{padding-left:24px;padding-right:24px}
.about .wrap,.contact .wrap,.quote-block .wrap,.band > .wrap{max-width:calc(var(--max) - 48px)}
.band{background:transparent}
.band > .wrap{background:var(--ice-soft);border-radius:var(--radius-l);padding:48px 56px}
@media (max-width:960px){.band > .wrap{padding:32px 26px}}
@media (max-width:560px){.band > .wrap{padding:26px 20px}}
@media (max-width:380px){.about,.contact,.quote-block,.band{padding-left:18px;padding-right:18px}}

/* The film block's play control: a quiet pill in the corner instead of a
   92px disc over the middle of the picture. */
.video .play-btn{
  inset:auto auto 20px 20px;margin:0;width:auto;height:auto;
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 18px 11px 15px;border-radius:999px;
  background:var(--ice);color:var(--navy);
  font-weight:600;font-size:.95rem;line-height:1;
  box-shadow:0 6px 18px rgba(3,54,89,.18);
}
.video .play-btn svg{width:14px;height:14px;margin:0}
.video .play-btn:hover{transform:none;background:var(--ice-soft);box-shadow:0 8px 24px rgba(3,54,89,.24)}

/* The menu sits to the right, next to Kontakta oss, rather than centred
   between it and the logo. Narrower desktops get a smaller gap and text so
   the six items never crowd the button. The mobile menu is untouched. */
@media (min-width:961px){
  .nav ul{margin-left:auto;margin-right:32px;gap:30px}
  .nav ul a{font-size:.95rem}
}
@media (min-width:961px) and (max-width:1180px){
  .nav ul{margin-right:22px;gap:20px}
  .nav ul a{font-size:.9rem}
}
@media (min-width:961px){.nav ul a,.nav .btn{white-space:nowrap}}
@media (min-width:961px) and (max-width:1080px){
  .nav ul{margin-right:16px;gap:14px}
  .nav ul a{font-size:.85rem}
  .nav .btn{padding:10px 16px;font-size:.92rem}
  .nav .logo img{height:28px}
}