/* Puheklinikka – style A ("selkeä"), chosen by Nana 2026-10-03.
   Based on /mnt/project-files/design-ideas/style-a. All text colours meet WCAG 2.1 AA (4.5:1). */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/montserrat-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-latin-600-normal.woff2) format('woff2')}

:root{
  --o:#b4580f;      /* orange for text and links, 4.83:1 on white (same as --brand-t) */
  --ob:#c46013;     /* brand orange, decoration only */
  --t:#3a3a3a;      /* body text */
  --h:#262626;      /* headings */
  --soft:#f6f2ee;   /* light warm band */
  --line:#e3ddd6;
  --brand-t:#b4580f; /* orange behind white normal-size text, 4.83:1 */
  --dark:#474747;   /* footer background, white text 9.3:1 */
  --focus:#262626;  /* keyboard focus ring, same everywhere */
  --peach:#fdf1e7;  /* hover tint */
  --o-beige:#a34e0e; /* orange text on the beige band: #b4580f is only 4.4:1 there, this is 5.3:1 */
  --foot-t:#fff;    /* footer text */
  --foot-a:#fff;    /* footer links */
  --foot-hover:#5c5c5c;
}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--t);font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;font-size:1rem;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--o);text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:.75em 1em;z-index:100}
.skip:focus{left:1em;top:1em}

/* header */
header.site{background:#fff;border-bottom:4px solid var(--ob);position:relative;z-index:10}
.head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:18px;padding-bottom:18px}
.logo img{height:52px;width:auto}
.menu-toggle{display:none}
nav.main>ul{list-style:none;margin:0;padding:0;display:flex;gap:6px 22px;flex-wrap:wrap;justify-content:flex-end;font-size:.88rem;font-weight:600}
nav.main li{position:relative}
nav.main a,nav.main button{display:block;padding:8px 0;color:var(--h);text-decoration:none;font:inherit;background:none;border:0;cursor:pointer;line-height:1.4}
nav.main a:hover,nav.main button:hover{text-decoration:underline}
nav.main [aria-current="page"],nav.main a.active,nav.main .folder.active>button{color:var(--o);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
nav.main button::after{content:"";display:inline-block;margin-left:.4em;border:4px solid transparent;border-top-color:currentColor;transform:translateY(25%)}
nav.main .sub{display:none;list-style:none;margin:0;padding:6px 0;position:absolute;right:0;top:100%;min-width:260px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--ob);box-shadow:0 8px 24px rgba(0,0,0,.08);font-weight:400}
nav.main .sub a{padding:9px 18px}
nav.main .sub a:hover,nav.main .sub a:focus{background:var(--peach);color:var(--o);text-decoration:none}
nav.main .folder.open .sub{display:block}

/* title band and layout */
.band{background:var(--ob)}  /* orange title band on inner pages (Nana, 2026-10-03); white h1 is 4.18:1, AA for large text only, so keep normal-size text out of the band */
.band .wrap{padding-top:40px;padding-bottom:40px}
.crumb{font-size:.85rem;font-weight:600;color:var(--o-beige);margin:0 0 .3em}
.band h1{font-size:2.1rem;line-height:1.25;font-weight:600;color:#fff;margin:0}
.layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;padding-top:48px;padding-bottom:64px}
.layout.single{grid-template-columns:minmax(0,1fr)}
main:focus{outline:none}
nav.side ul{list-style:none;margin:0;padding:0;border-left:3px solid var(--line)}
nav.side a{display:block;padding:9px 16px;color:var(--h);text-decoration:none;font-size:.95rem;margin-left:-3px;border-left:3px solid transparent}
nav.side a:hover{background:var(--peach)}
nav.side a[aria-current]{border-left-color:var(--ob);color:var(--o);font-weight:600}

/* content */
.content{max-width:820px}
.layout.single .content{max-width:none}
/* section headings are H2 on every page, sub-headings H3 (Nana, 2026-10-04); same look as the old H3/H4 */
.content h2{font-size:1.15rem;line-height:1.3;font-weight:600;color:var(--h);margin:1.4em 0 .5em}
.content h2:first-child{margin-top:0}
.content h3{font-size:1rem;line-height:1.3;font-weight:600;color:var(--h);margin:1.2em 0 .4em}
.content h4{font-size:1rem;font-weight:600;color:var(--h);margin:1.2em 0 .4em}
.content p{margin:0 0 1.2em}
.content ul,.content ol{margin:0 0 1.2em;padding-left:1.4em}
.content hr{border:0;border-top:1px solid var(--dark);margin:36px 0;clear:both}
/* thin grey line between sections (Nana, 2026-10-03); class added by the build to every top-level heading after the first */
.content .sep{clear:both;border-top:1px solid var(--dark);padding-top:1.4em;margin-top:2em}
.content figure{margin:0 0 1.2em}
.content img{border-radius:10px}
strong{font-weight:600}
.spacer{height:12px;clear:both}
.row{display:flex;gap:32px;align-items:flex-start;clear:both}
.col{flex:1 1 0;min-width:0}
.span-1{flex:1 1 0}.span-2{flex:2 1 0}.span-3{flex:3 1 0}.span-4{flex:4 1 0}.span-5{flex:5 1 0}.span-6{flex:6 1 0}
.span-7{flex:7 1 0}.span-8{flex:8 1 0}.span-9{flex:9 1 0}.span-10{flex:10 1 0}.span-11{flex:11 1 0}.span-12{flex:12 1 0}
.block.float-right{float:right;clear:right;width:45%;margin:0 0 1em 32px}
.block.float-left{float:left;clear:left;width:45%;margin:0 32px 1em 0}
.block.span-8.float-right,.block.span-9.float-right,.block.span-8.float-left,.block.span-9.float-left{float:none;width:auto;margin:0}
.content::after{content:"";display:block;clear:both}
.btn-wrap{margin:0 0 1.2em}
.btn-wrap.center{text-align:center}.btn-wrap.right{text-align:right}
.btn{display:inline-block;padding:12px 24px;border:2px solid var(--brand-t);border-radius:999px;background:var(--brand-t);color:#fff;text-decoration:none;font-weight:600;line-height:1.3}
.btn.alt{background:#fff;color:var(--brand-t)}
.btn{white-space:nowrap}  /* button text on one line (Nana, 2026-10-11) */
/* buttons invert on hover like the tiles (approved by Nana, 2026-10-03) */
.btn:hover,.btn:focus-visible{background:#fff;color:var(--brand-t)}
.btn.alt:hover,.btn.alt:focus-visible{background:var(--brand-t);color:#fff}
.email-link a{font-weight:600}
.map iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.embed iframe{width:100%;border:0;display:block}

/* homepage */
.hero{background:var(--soft)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding-top:56px;padding-bottom:56px}
.hero h1{font-size:2.1rem;line-height:1.25;font-weight:600;color:var(--h);margin:0 0 .6em}
.hero p{font-size:1.05rem;margin:0 0 1em}
.hero figure{margin:0}
.hero img{border-radius:10px}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.4em}
.sec{padding:56px 0}
.sec-tight{padding-top:0}
.sec h2{font-size:1.5rem;font-weight:600;color:var(--h);margin:0 0 24px}
.sec>.wrap>p{max-width:52em;margin:0 0 28px}
.sec>.wrap>p:last-child{margin-bottom:0}  /* no extra gap before the next section (Nana, 2026-10-04) */
.sec>.wrap>p.areas{max-width:none}  /* as wide as the service tiles (Nana, 2026-10-04) */
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}  /* two rows of five (Nana, 2026-10-04) */
@media (max-width:1100px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tiles a{display:flex;align-items:center;justify-content:center;text-align:center;height:100%;min-height:96px;padding:22px 20px;border:2px solid var(--brand-t);border-radius:10px;color:#fff;text-decoration:none;font-weight:600;background:var(--brand-t);transition:background-color .15s,color .15s}
.tiles a:hover,.tiles a:focus-visible{background:#fff;color:var(--brand-t)}
.tiles a:focus-visible{outline:3px solid var(--h);outline-offset:3px}
/* white tiles, same look and hover as the therapist cards (comparison, Nana 2026-10-04) */
.tiles a.light{background:#fff;color:var(--o);border-color:var(--ob)}
.tiles a.light:hover,.tiles a.light:focus-visible{background:var(--brand-t);color:#fff;border-color:var(--brand-t)}  /* orange on hover (Nana, 2026-10-10) */
.places{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.place{background:#fff;border:2px solid var(--ob);border-radius:10px;overflow:hidden}
.place .txt{padding:24px}
.place h3{margin:0 0 .3em;font-size:1.3rem;color:var(--brand-t)}
.place p{margin:0 0 1em}
/* group cards on Ryhmämuotoinen kuntoutus, same look as the office cards (Nana, 2026-10-04) */
.content .places{clear:both;margin:0 0 1.2em}
.groups .place h3{margin:0 0 .6em;font-size:1.15rem;line-height:1.3;color:var(--brand-t)}
/* TRIAL (Nana, 2026-10-04): Piirtäjät and Puhujat without cards, side by side with a vertical line between,
   dark headings. Revert: delete this block and the matching lines in the phone section. */
.groups .place{background:none;border:0;border-radius:0;overflow:visible}
.groups .place .txt{padding:0}
.groups .place+.place{border-left:1px solid var(--dark);padding-left:32px}
.groups .place h3{color:var(--h)}
/* .content .group-title{color:var(--brand-t)}  orange group headings switched off: same dark grey as the rest of the site (Nana, 2026-10-04) */
/* text and photo side by side, photo bottom level with the last line of text (Palvelut läheisille, Nana 2026-10-04) */
.pair{display:grid;grid-template-columns:minmax(0,1fr) 45%;gap:32px;align-items:end;clear:both}
.pair-text>:last-child,.pair figure{margin-bottom:0}

/* news cards */
.news{display:grid;gap:24px}
.news{gap:0}
.news article{padding:32px 0;border-top:1px solid var(--dark)}
.news article:first-child{border-top:0;padding-top:0}
.news article::after{content:"";display:block;clear:both}
.news article h2:first-child{margin-top:0;color:var(--o);font-size:1.05rem}

/* therapists */
.content .people{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.person{position:relative;background:#fff;border:2px solid var(--ob);border-radius:10px;overflow:hidden;transition:background-color .15s}
.person:hover{background:var(--peach)}
.person:hover .card-link{text-decoration:underline}
.person:hover h2 a{color:var(--o-beige)}  /* darker orange on peach keeps AA contrast (Nana, 2026-10-04) */
.person .card-link::after{content:"";position:absolute;inset:0;z-index:1}
.person .card-link:focus-visible{outline:none}
.person:has(.card-link:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.person .txt p a{position:relative;z-index:2}
.person .photo{display:block}
.content .person img{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:0}
.person .txt{padding:16px 20px 20px}
.person h2{font-size:1.1rem;margin:0 0 .3em}
.person h2 a{color:var(--o);text-decoration:none}
.person p{margin:0;font-size:.95rem}
.profile{display:grid;grid-template-columns:340px minmax(0,1fr);gap:48px}
.profile img{border-radius:10px}
.profile .card{padding:20px 0 0}
.profile .card p{margin:0}
.back{font-weight:600}
.form-done{scroll-margin-top:24px}

/* footer */
footer.site{background:var(--dark);color:var(--foot-t);padding:18px 0;font-size:.92rem;line-height:1.5}  /* lower footer (Nana, 2026-10-03) */
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot p{margin:0}
footer.site a{color:var(--foot-a)}
.social{list-style:none;margin:0;padding:0;display:flex;gap:8px}
.social a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--foot-t)}
.social a:hover,.social a:focus{background:var(--foot-hover)}
.social svg{width:20px;height:20px;fill:#fff}

/* phone */
/* former PDFs as web pages: label/content tables (Nana, 2026-10-11) */
.content table.doc{border-collapse:collapse;width:100%;margin:0 0 1.5em;font-size:.95rem}
.content table.doc th,.content table.doc td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.content table.doc th[scope=row]{width:32%;font-weight:600}
.content table.doc th[scope=col]{background:var(--peach)}
.content table.doc th a{color:var(--o-beige)}  /* AA contrast on the peach header cells */
.content table.doc p{margin:0 0 .6em}
.content .doc td,.content .doc th,.content .doc p,.content .doc li{overflow-wrap:anywhere}
.content table.doc p:last-child{margin:0}
.content p.doc-sub{font-weight:600}
@media (max-width:860px){
  .wrap{padding:0 18px}
  .head{flex-wrap:wrap}
  .logo img{height:40px}
  .menu-toggle{display:block;padding:8px 12px;background:#fff;border:2px solid var(--h);border-radius:6px;color:var(--h);font:inherit;font-weight:600;cursor:pointer}
  nav.main{display:none;width:100%}
  nav.main.open{display:block}
  nav.main>ul{display:block;font-size:1rem}
  nav.main a,nav.main button{width:100%;text-align:left;padding:12px 0;border-top:1px solid var(--line)}
  nav.main .sub{position:static;box-shadow:none;border:0;min-width:0;padding:0 0 0 16px}
  nav.main .sub a{padding:10px 0}
  .band .wrap{padding-top:28px;padding-bottom:28px}
  .band h1,.hero h1{font-size:1.6rem}
  .layout{grid-template-columns:1fr;gap:24px;padding-top:24px;padding-bottom:40px}
  nav.side ul{position:static;display:flex;flex-wrap:wrap;gap:8px;border:0}
  nav.side a{border:1px solid var(--line);border-radius:999px;padding:6px 14px;margin:0;font-size:.85rem}
  nav.side a[aria-current]{border-color:var(--ob)}
  .hero-grid{grid-template-columns:1fr;gap:24px;padding-top:28px;padding-bottom:28px}
  .hero figure{order:-1}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles a{overflow-wrap:anywhere;hyphens:auto}
  .places{grid-template-columns:1fr}
  .groups .place+.place{border-left:0;padding-left:0;border-top:1px solid var(--dark);padding-top:24px}  /* TRIAL: line goes horizontal on phones */
  .block.float-right,.block.float-left{float:none;width:auto;margin:0 0 1em}
  .row{display:block}
  .pair{grid-template-columns:1fr;gap:0}
  .pair figure{margin-bottom:1.2em}
  /* phones: contact details only, stacked like the homepage tiles (Nana, 2026-10-11) */
  .content .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .content .person img{display:none}
  .person .txt{padding:14px 16px 16px}
  .person p{overflow-wrap:anywhere}
  .profile{grid-template-columns:1fr;gap:24px}
  .content table.doc th[scope=row],.content table.doc td{display:block;width:auto}
  .content table.doc th[scope=row]{border-bottom:0;background:var(--peach)}
  .content table.doc tr{display:block;margin-bottom:12px}
}
@media (max-width:420px){.tiles,.content .people{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
footer.site :focus-visible{outline-color:#fff}
.content li>ul{margin:0}