/* ============================================================================
   prof-edit.css — the profession-page editing-pass vocabulary.
   Fewer cards, thin rules, three display moments, one lifestyle section.
   First written inline on sonographer-new-zealand (21 Aug 2026), then copied to
   radiographer-new-zealand — which is exactly the mistake this project keeps
   recording, so it lives in one file. Every profession page loads this sheet.

   Country accents come from the page, not from here:
     --acc         the country accent (Fern #72A471 / Apricot #D9A084)
     --acc-text    small text, icons and labels on light surfaces
                   (NZ #2F5E49 · AU #A34438 — both AA on every brand surface)
     --dark-eyebrow  eyebrow colour inside the dark band
                   (NZ #C6E084 · AU #EFC3AA — the brand lime fails AA at that size)
   Fallbacks are the New Zealand values, so a page that sets nothing still passes.
   ============================================================================ */

.moment{font-family:var(--display);font-weight:300;font-size:clamp(34px,5.2vw,58px);line-height:1.05;letter-spacing:-.025em;color:var(--teal);text-wrap:balance}
.editorial{max-width:760px}
.tlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:16px;color:var(--teal);border-bottom:1px solid var(--rule-tint);padding-bottom:3px}
.tlink .ar{transition:transform .2s ease}.tlink:hover .ar{transform:translateX(3px)}
.linkrow{display:flex;flex-wrap:wrap;gap:24px 40px;margin-top:32px}

/* facts, no cards */
.factrow{display:grid;grid-template-columns:repeat(5,1fr);gap:0 clamp(16px,2vw,32px);margin-top:clamp(36px,4vw,52px)}
.factrow .f{padding:22px 0 0;border-top:2px solid var(--acc,#72A471)}
.factrow .n{display:block;font-family:var(--display);font-weight:600;font-size:clamp(20px,2.1vw,26px);line-height:1.1;letter-spacing:-.02em;color:var(--teal);margin-bottom:10px}
.factrow .d{font-size:14.5px;line-height:1.5;color:var(--muted)}
@media (max-width:1080px){.factrow{grid-template-columns:repeat(3,1fr);gap:28px clamp(16px,2vw,32px)}}
@media (max-width:640px){.factrow{grid-template-columns:1fr}}

/* closing editorial line, given room */
.closingline{font-family:var(--display);font-weight:300;font-size:clamp(24px,3.2vw,38px);line-height:1.2;letter-spacing:-.02em;color:var(--teal);max-width:26ch;margin:clamp(44px,5vw,68px) 0 0}

/* three editorial columns, thin vertical rules */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(36px,4vw,52px)}
.cols3 .c{padding:0 clamp(22px,3vw,42px);border-left:1px solid var(--rule-tint)}
.cols3 .c:first-child{padding-left:0;border-left:none}.cols3 .c:last-child{padding-right:0}
.cols3 .k{display:block;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--acc-text,#2F5E49);margin-bottom:12px}
.cols3 .c h3{font-size:19px;color:var(--teal);margin-bottom:10px}
.cols3 .c p{font-size:15.5px;line-height:1.62;color:var(--muted);margin:0}
@media (max-width:820px){.cols3{grid-template-columns:1fr;gap:32px}.cols3 .c{padding:28px 0 0;border-left:none;border-top:1px solid var(--rule-tint)}.cols3 .c:first-child{padding-top:0;border-top:none}}

/* pay: one big statement, then four quiet columns */
.payhead{margin-top:clamp(28px,3.5vw,40px)}
.payhead .fig{display:block;font-family:var(--display);font-weight:300;font-size:clamp(42px,6vw,72px);line-height:1;letter-spacing:-.03em;color:var(--teal)}
.payhead .cap{display:block;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--acc-text,#2F5E49);margin-top:14px}
.paynote{margin-top:14px;font-size:16px;color:var(--muted);max-width:56ch}
.paygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(16px,2vw,32px);margin-top:clamp(32px,4vw,48px)}
.paygrid .p{padding:20px 0 0;border-top:1px solid var(--rule-tint)}
.paygrid .k{display:block;font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-text,#2F5E49);margin-bottom:10px}
.paygrid p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0}
.paygrid strong{color:var(--teal);font-weight:600}
@media (max-width:820px){.paygrid{grid-template-columns:1fr 1fr;gap:24px clamp(16px,2vw,32px)}}
@media (max-width:520px){.paygrid{grid-template-columns:1fr}}

/* lifestyle — one section: big statement, three photographs, one pull quote */
.lifewrap .moment{max-width:20ch}
.lifewrap .say{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(20px,2.4vw,28px);line-height:1.4;color:var(--teal);margin:24px 0 0;max-width:34ch}
.lifeshots{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;margin-top:clamp(36px,4vw,52px)}
.lifeshots img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg)}
.lifeshots .big{aspect-ratio:3/2}
.lifeshots .pair{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.lifeshots .pair img{aspect-ratio:16/10}
@media (max-width:760px){.lifeshots{grid-template-columns:1fr}.lifeshots .pair{grid-template-columns:1fr 1fr;grid-template-rows:none}}
.lifebody{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,72px);margin-top:clamp(36px,4vw,52px);align-items:start}
.lifebody p{font-size:17px;line-height:1.7;color:var(--text)}
.lifebody .quote{font-family:var(--display);font-weight:300;font-size:clamp(23px,2.9vw,34px);line-height:1.22;letter-spacing:-.02em;color:var(--teal);padding-left:26px;border-left:3px solid var(--acc,#72A471)}
@media (max-width:820px){.lifebody{grid-template-columns:1fr;gap:32px}}

/* where you could work — four quiet columns */
.where4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(16px,2vw,32px);margin-top:clamp(36px,4vw,52px)}
.where4 .w{padding:20px 0 0;border-top:2px solid var(--acc,#72A471)}
.where4 .k{display:block;font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-text,#2F5E49);margin-bottom:10px}
.where4 p{font-size:15px;line-height:1.55;color:var(--muted);margin:0}
@media (max-width:820px){.where4{grid-template-columns:1fr 1fr;gap:28px clamp(16px,2vw,32px)}}
@media (max-width:480px){.where4{grid-template-columns:1fr}}

/* route — compact linear */
.route{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:clamp(36px,4vw,52px)}
.route .s{padding:20px clamp(12px,1.4vw,20px) 0;border-top:2px solid var(--teal)}
.route .s:nth-child(n+4){border-top-color:var(--acc,#72A471)}
.route .n{display:block;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.07em;color:var(--acc-text,#2F5E49);margin-bottom:8px}
.route h3{font-size:16px;color:var(--teal);margin-bottom:6px;line-height:1.28}
.route p{font-size:14px;line-height:1.5;color:var(--muted);margin:0}
@media (max-width:980px){.route{grid-template-columns:repeat(3,1fr);gap:28px 20px}}
@media (max-width:600px){.route{grid-template-columns:1fr;gap:0}.route .s{padding:20px 0;border-top:1px solid var(--rule-tint)}.route .s:first-child{border-top:2px solid var(--teal)}}

/* what we can't promise — the page's one dark band */
.promise{background:var(--teal);color:#fff}
.promise .eyebrow{color:var(--dark-eyebrow,#C6E084)}
.promise .eyebrow::before{background:#A6C84A!important}
.promise .moment{color:#fff}
.promise .lead{color:rgba(255,255,255,.84)}
.promise .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(36px,4vw,52px)}
.promise .t{padding:24px clamp(20px,2.6vw,40px) 0;border-left:1px solid rgba(255,255,255,.24)}
.promise .t:first-child{padding-left:0;border-left:none}.promise .t:last-child{padding-right:0}
.promise .t h3{color:#fff;font-size:19px;margin-bottom:12px;line-height:1.28}
.promise .t p{font-size:15px;line-height:1.62;color:rgba(255,255,255,.82);margin:0}
@media (max-width:860px){.promise .trio{grid-template-columns:1fr;gap:32px}.promise .t{padding:28px 0 0;border-left:none;border-top:1px solid rgba(255,255,255,.24)}.promise .t:first-child{padding-top:0;border-top:none}}

/* comparison: fewer rows, narrower row heads */
.cmp tbody th{width:16%}

/* hero: the photograph carries more of the frame — by HEIGHT, not width.
   Width is deliberately left to hero-rail.css (60%). Two reasons, both measured:
   (a) hero-rail.css already had it at 60%, so an override at 58% made it smaller,
       not bigger; (b) widening it moves the photograph's left edge further under
       the copy box, and the boxes always cross on wide screens — .hero .bg is a %
       of the viewport, .hero .copy a % of the 1180px-capped wrap, so they never
       tile. At 64% the overlap reaches ~313px at 2560px, past the end of
       hero-rail.css's 262px cream ramp, putting h1 text on bare photograph.
   A taller hero grows the image area (the .bg is pinned top-to-bottom) with no
   effect on contrast at all. The height goes on .hero .wrap rather than .hero, and
   the wrap centres its own copy: #profession-redesign flattens .hero to
   display:block, so align-content on .hero would compute but do nothing, and
   switching .hero to grid would pull .hero-rail up out of the hero's bottom edge
   into the centred row stack. Growing the wrap leaves the rail exactly where it is.
   Do NOT override .hero .bg::after here: that ramp is what keeps the headline
   legible independently of the image. */
@media (min-width:1041px){.hero .wrap{min-height:clamp(560px,72svh,660px);display:flex;flex-direction:column;justify-content:center}}
.hero .wrap{padding-top:clamp(52px,6vw,86px);padding-bottom:clamp(52px,6vw,86px)}