:root {
  color-scheme: light;
  --ink: #14272d;
  --paper: #f7f8f3;
  --line: #d1d8ce;
  --muted: #435650;
  --lime: #b2e66c;
  --green: #355b23;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
}
* { box-sizing: border-box; }
body, figure { margin: 0; }
a { color: inherit; text-underline-offset: .25em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.1; }
h1, h2 { letter-spacing: -.045em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4vw, 3.45rem); text-wrap: initial; }
h2 { font-size: clamp(2.05rem, 4vw, 3.45rem); max-width: 20ch; }
h3 { font-size: 1.25rem; }
.wrap { width: min(100% - 3rem, 74rem); margin-inline: auto; }
.dark { background: var(--ink); color: #f8fbf3; }
.skip { position: absolute; top: .5rem; left: .5rem; z-index: 1; padding: .5rem 1rem; background: white; transform: translateY(-160%); }
.skip:focus { transform: none; }
.site-header { background: #102127; color: white; border-bottom: 1px solid #385050; }
.header-row, .footer-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; }
.logo { width: 6.7rem; }
nav { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem clamp(.7rem, 3vw, 2rem); font-size: .92rem; font-weight: 600; }
nav a { padding-block: .45rem; text-decoration: none; }
nav a:hover { text-decoration: underline; }
.nav-contact { color: var(--lime); }
.hero {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  background: linear-gradient(120deg, #f7f8f3 22%, #e4eee0 100%);
  border-bottom: 1px solid var(--line);
}
.hero-grid, .split { display: grid; grid-template-columns: 1.06fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 5rem); }
.eyebrow, .number, figcaption {
  font: 700 .78rem/1.45 ui-monospace, Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
}
.eyebrow { margin-bottom: 1rem; }
.dark .eyebrow { color: var(--lime); }
.intro { margin-top: 1.25rem; color: var(--muted); max-width: 46ch; font-size: clamp(1rem, 2vw, 1.25rem); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1.8rem; }
.button { display: inline-flex; width: fit-content; gap: .85rem; background: var(--lime); color: #14272d; font-weight: 750; padding: .75rem 1.1rem; border-radius: .22rem; text-decoration: none; }
.button:hover { background: #d4f9a6; }
.dark .button:focus-visible { outline-color: var(--lime); }
.text-link { font-weight: 650; }
.signal-panel {
  width: min(100%, 28rem);
  justify-self: end;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border-radius: .45rem;
  background: var(--ink);
  color: #f8fbf3;
}
.signal-panel figcaption { color: var(--lime); margin-bottom: .8rem; }
.signal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(4rem, 40%);
  align-items: center;
  gap: .75rem;
  border-top: 1px solid #476561;
  padding-block: .65rem;
}
.signal small { display: block; color: #d5e2df; }
.signal svg { display: block; width: 100%; fill: none; stroke: var(--lime); stroke-width: 2; }
.signal-track { stroke: #78938c; }
.logic-pulse { stroke-dasharray: 18 158; stroke-dashoffset: -74; }
.axis-marker { fill: var(--lime); }
@media (prefers-reduced-motion: no-preference) {
  .logic-pulse { animation: logic-pulse 2.2s ease-out; }
  .axis-marker { animation: axis-position 2.8s .2s ease-in-out; }
  .vision-scan { animation: vision-scan 2.6s .5s ease-in-out; }
}
@keyframes logic-pulse {
  from { stroke-dashoffset: 18; }
  to { stroke-dashoffset: -74; }
}
@keyframes axis-position {
  0%, 100% { transform: translateX(0); }
  45%, 65% { transform: translateX(48px); }
}
@keyframes vision-scan {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-10px); }
  75% { transform: translateY(10px); }
}
.section { padding-block: clamp(3rem, 7vw, 6rem); }
.section-intro { margin-top: 1rem; max-width: 58ch; color: var(--muted); font-size: 1.1rem; }
.dark .section-intro { color: #d5e2df; }
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); margin-top: 2rem; }
.services article { background: var(--paper); padding: clamp(1.2rem, 3vw, 2rem); }
.number { display: block; margin-bottom: .75rem; }
.equipment { background: #e6eee0; }
.opportunities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 2rem; background: var(--line); border: 1px solid var(--line); }
.opportunities article { padding: clamp(1.2rem, 3vw, 2rem); background: var(--paper); }
.example-note { margin-top: .65rem; color: var(--muted); font-size: .9rem; }
.example { margin: 1.15rem 0 0; }
.example div + div { margin-top: .85rem; }
.example dt { color: var(--green); font-weight: 700; }
.example dd { margin: .15rem 0 0; color: var(--muted); }
.equipment-note { max-width: 72ch; margin: 1.4rem 0 .65rem; }
.services p, .steps p { color: var(--muted); margin-top: .7rem; }
.platforms { margin: 0; }
.platforms div { padding: .9rem 0; border-top: 1px solid #476561; }
.platforms div:last-child { border-bottom: 1px solid #476561; }
.platforms dt { color: var(--lime); font-weight: 700; }
.platforms dd { margin: .2rem 0 0; color: #d5e2df; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.steps li { padding-top: 1rem; border-top: 2px solid var(--green); }
.contact { background: #e6eee0; }
.contact-card { display: grid; justify-items: start; gap: .5rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--paper); border: 1px solid var(--line); }
.contact-card .button { margin: .5rem 0; }
.home-hero {
  background:
    linear-gradient(100deg, var(--paper) 18%, transparent 90%),
    linear-gradient(#355b2312 1px, transparent 1px),
    linear-gradient(90deg, #355b2312 1px, transparent 1px),
    #e4eee0;
  background-size: auto, 28px 28px, 28px 28px, auto;
}
.home-hero h1 { font-size: clamp(2.25rem, 5.5vw, 4.6rem); }
.home-hero .intro, .subpage-title + .intro { max-width: 58ch; }
.home-paths { margin-top: clamp(2rem, 4.5vw, 3.5rem); }
.home-paths h2 { font-size: clamp(1.4rem, 3vw, 2rem); max-width: none; text-wrap: initial; }
.path-grid, .about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.path-grid { margin-top: 1rem; }
.path-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: .75rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  background: var(--paper);
  box-shadow: 0 5px 16px #14272d0d;
  text-decoration: none;
}
.path-card:is(:hover, :focus-visible) { background: #fff; box-shadow: 0 8px 22px #14272d1a; }
.path-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.path-card .eyebrow { margin: 0; }
.path-card p { color: var(--muted); }
.path-icon { width: clamp(3rem, 7vw, 5rem); flex: none; color: var(--green); fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.path-icon .icon-frame { fill: #eaf1e3; }
.path-icon .icon-guide { opacity: .25; }
.path-icon .icon-pulse { stroke: #629b30; stroke-width: 3; stroke-dasharray: 18 100; stroke-dashoffset: 18; }
.path-icon .icon-node { fill: var(--lime); }
@media (prefers-reduced-motion: no-preference) {
  .path-card { transition: background .18s ease, box-shadow .18s ease; }
  .path-card:is(:hover, :focus-visible) .icon-pulse { animation: path-signal .7s ease-out; }
  .path-card:is(:hover, :focus-visible) .icon-node { animation: path-transfer .55s ease-in-out; }
}
@keyframes path-signal { to { stroke-dashoffset: -100; } }
@keyframes path-transfer {
  from { transform: translateX(-7px); }
  to { transform: translateX(7px); }
}
.path-link { color: var(--green); font-weight: 700; text-decoration: underline; }
.about-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.75rem, 7vw, 6rem); align-items: center; }
.about-aside { padding: clamp(1.25rem, 4vw, 2.5rem); background: var(--ink); color: var(--paper); }
.about-icon { width: 3.5rem; margin-bottom: .85rem; fill: none; stroke: var(--lime); stroke-width: 1.5; }
.about-aside .eyebrow { color: var(--lime); }
.about-aside p:last-child { margin-top: .8rem; color: #d5e2df; }
.subpage-title { max-width: 21ch; }
.footer-row { font-size: .9rem; padding-block: 1.4rem; }
@media (max-width: 52rem) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .signal-panel { justify-self: start; }
  .services { grid-template-columns: repeat(2, 1fr); }
  .opportunities { grid-template-columns: 1fr; }
}
@media (max-width: 34rem) {
  .wrap { width: calc(100% - 2rem); }
  .header-row { align-items: flex-start; flex-direction: column; gap: .45rem; }
  nav { column-gap: .9rem; }
  .services, .steps { grid-template-columns: 1fr; }
  .path-grid { grid-template-columns: 1fr; }
  figcaption { font-size: .66rem; }
}
@media (max-width: 25rem) {
  .hero-break { display: none; }
}

/* November polish: lightweight controls artwork; no JavaScript required. */
.home-intro-row {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr);gap:3rem;align-items:center;}
.control-signature {max-width:20rem;color:var(--green);padding-top:1rem;}
.control-signature svg {display:block;width:100%;stroke:currentColor;stroke-width:1.5;}
.signature-grid {opacity:.12;stroke-width:.5;}
.signature-wire {opacity:.45;}
.signature-flow {stroke:#609c35;stroke-width:3;stroke-dasharray:9 100;stroke-dashoffset:-100;}
.control-signature span {display:block;margin-top:.45rem;font:600 .65rem/1.5 ui-monospace,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;}
.project-diagram {width:100%;max-width:29rem;padding:1.5rem;background:var(--ink);color:var(--paper);border:1px solid #476561;border-radius:.45rem;justify-self:end;}
.project-diagram figcaption {color:var(--lime);margin-bottom:1.5rem;}
.project-diagram svg {width:100%;display:block;}
.diagram-lines {stroke:var(--lime);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;}
.diagram-labels {fill:#d5e2df;font:11px ui-monospace,Consolas,monospace;text-anchor:middle;letter-spacing:1px;}
.diagram-packet {fill:var(--lime);}
.project-diagram p {font-size:.88rem;color:#d5e2df;border-top:1px solid #476561;padding-top:1rem;margin-top:1rem;}
nav a[aria-current="page"] {color:var(--lime);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.5em;}
.path-card {border-radius:.3rem;}
.path-link span {display:inline-block;}
.footer-row {flex-wrap:wrap;}
@media (prefers-reduced-motion:no-preference) {
 .signature-flow {animation:signature-pass 2.4s .3s ease-in-out both;}
 .diagram-packet {animation:diagram-pass 2.3s .25s ease-in-out both;}
 .path-card {transition:background .18s ease,box-shadow .18s ease,transform .18s ease;}
 .path-card:is(:hover,:focus-visible) {transform:translateY(-3px);}
 .path-link span {transition:transform .18s ease;}
 .path-card:is(:hover,:focus-visible) .path-link span {transform:translate(2px,-2px);}
}
@keyframes signature-pass {from{stroke-dashoffset:9;}to{stroke-dashoffset:-100;}}
@keyframes diagram-pass {0%{transform:translate(-110px,-20px);opacity:0;}20%{opacity:1;}50%{transform:translate(0,0);}85%{opacity:1;}100%{transform:translate(0,45px);opacity:0;}}
@media(max-width:52rem) {.home-intro-row{grid-template-columns:1fr;gap:.5rem;}.control-signature{max-width:16rem;}.project-diagram{justify-self:start;}}
@media(max-width:34rem) {.home-hero h1{font-size:clamp(2.1rem,9vw,3rem);}.home-hero .hero-break{display:none;}nav{font-size:.84rem;gap:.2rem 1rem;}nav a{min-height:44px;display:inline-flex;align-items:center;}.path-top .eyebrow{font-size:.68rem;}.control-signature{max-width:13rem;} .project-diagram{padding:1.1rem;}}

.diagram-lines {fill:none;}

/* Homepage refinement, November 13. Support page layout stays unchanged. */
.path-card { grid-template-rows: auto auto auto auto 1fr auto; }
.path-card h3 { font-size:clamp(1.8rem,3vw,2.6rem); letter-spacing:-.035em; }
.path-card .path-summary { font-size:1.18rem; color:var(--ink); font-weight:650; }
.path-details { margin:.4rem 0 .7rem; padding:1rem 0 0; list-style:none; border-top:1px solid var(--line); color:var(--muted); }
.path-details li + li { margin-top:.8rem; }
.path-details strong { color:var(--ink); }
.process-signature { position:relative; max-width:24rem; }
.process-stages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; }
.process-stage { color:var(--green); text-align:center; border-bottom:2px solid var(--line); padding:.5rem .1rem .65rem; }
.process-stage svg { width:100%; max-width:5rem; display:block; margin:auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.process-stage span { font:600 .62rem/1.5 ui-monospace,Consolas,monospace; }
.portrait-placeholder { padding:clamp(1.5rem,3vw,2.5rem); text-align:center; background:#e6eee0; border:1px solid var(--line); border-radius:.3rem; }
.portrait-frame { max-width:15rem; margin:0 auto 1.5rem; }
.portrait-frame svg { display:block; width:100%; stroke:#63816a; stroke-width:1.3; }
.portrait-placeholder .eyebrow { margin-bottom:.6rem; }
.portrait-placeholder p:not(.eyebrow) { color:var(--muted); margin-top:.7rem; }
.portrait-note { display:block; margin-top:1.5rem; font: .75rem ui-monospace,Consolas,monospace; color:var(--muted); }
@media(prefers-reduced-motion:no-preference) {
 .process-stage { animation:process-step 9s ease-in-out infinite; }
 .process-stage:nth-child(2) { animation-delay:2s; }
 .process-stage:nth-child(3) { animation-delay:4s; }
}
@keyframes process-step { 0%,22%,100% { background:transparent; border-color:var(--line); } 5%,17% { background:#d4edbb; border-color:var(--green); } }
@media(prefers-reduced-motion:reduce) { .process-stage { animation:none; } }
@media(max-width:52rem) { .process-signature { margin-top:1rem; width:24rem; max-width:100%; } }
@media(max-width:34rem) { .path-card h3 { font-size:2rem; } .process-stage span { font-size:.65rem; } }

.home-intro-row > * { min-width:0; }
@media(max-width:52rem) { .home-intro-row { grid-template-columns:minmax(0,1fr); } }

/* Icon-only motion control keeps repeating animation optional without a visible checkbox. */
.process-signature { padding-bottom:2rem; }
.motion-toggle { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.motion-control { display:grid; place-items:center; position:absolute; bottom:0; right:0; width:28px; height:28px; border-radius:3px; color:var(--muted); cursor:pointer; }
.motion-control:hover { background:#d4edbb; }
.motion-control svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.motion-control .play-symbol { display:none; }
.motion-toggle:focus-visible + .motion-control { outline:2px solid var(--green); outline-offset:2px; }
.motion-toggle:checked + .motion-control .pause-symbol { display:none; }
.motion-toggle:checked + .motion-control .play-symbol { display:block; }
.motion-toggle:checked ~ .process-stages .process-stage { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce) { .motion-toggle,.motion-control { display:none; } .process-signature { padding-bottom:0; } }

/* Craig's supplied portrait: keep the complete photograph, with no face crop. */
.portrait-card { overflow:hidden; border:1px solid var(--line); border-radius:.3rem; background:#e6eee0; max-width:26rem; width:100%; justify-self:center; }
.portrait-photo { display:block; width:100%; height:auto; }
.portrait-caption { padding:1.25rem; text-align:center; }
.portrait-caption p { color:var(--muted); margin-top:.4rem; }

/* Final homepage spacing and support-page refinement. */
.home-intro-row { margin-top:1.5rem; }
.portrait-card { max-width:21rem; }
.support-lead { max-width:62ch; }
.support-note { margin-top:1.5rem; padding:1.1rem 1.25rem; border-left:3px solid var(--green); background:#e6eee0; color:var(--muted); }
.support-note a { color:var(--green); font-weight:650; }
.request-list { padding-left:1.15rem; margin:1rem 0 0; color:var(--muted); }
.request-list li + li { margin-top:.65rem; }
.support-crosslink { margin-top:1.2rem; font-size:.95rem; }
@media(max-width:34rem) { .home-intro-row { margin-top:1rem; } .portrait-card { max-width:20rem; } }

/* Shared faded grid and optional repeating machine-support illustrations. */
.support-hero {
 background:linear-gradient(100deg,var(--paper) 18%,transparent 90%),linear-gradient(#355b2312 1px,transparent 1px),linear-gradient(90deg,#355b2312 1px,transparent 1px),#e4eee0;
 background-size:auto,28px 28px,28px 28px,auto;
}
.repeating-signals { position:relative; padding-bottom:2.75rem; }
.repeating-signals .motion-control { right:.75rem; bottom:.4rem; color:#d5e2df; }
.repeating-signals .motion-control:hover { background:#355b23; }
.repeating-signals .motion-toggle:focus-visible + .motion-control { outline-color:var(--lime); }
.repeating-signals .motion-toggle:checked ~ .signal svg * { animation-play-state:paused; }
@media(prefers-reduced-motion:no-preference) {
 .repeating-signals .logic-pulse { animation:machine-logic 6s ease-in-out infinite; }
 .repeating-signals .axis-marker { animation:machine-axis 6s .3s ease-in-out infinite; }
 .repeating-signals .vision-scan { animation:machine-vision 6s .6s ease-in-out infinite; }
}
@keyframes machine-logic { 0% { stroke-dashoffset:18; } 40%,100% { stroke-dashoffset:-74; } }
@keyframes machine-axis { 0%,50%,100% { transform:translateX(0); } 20%,35% { transform:translateX(48px); } }
@keyframes machine-vision { 0%,50%,100% { transform:translateY(0); } 15% { transform:translateY(-10px); } 35% { transform:translateY(10px); } }
@media(prefers-reduced-motion:reduce) { .repeating-signals { padding-bottom:1.5rem; } }

/* Orthogonal project milestone timeline, with optional looping progress. */
.milestone-diagram { position:relative; padding-bottom:2.5rem; }
.milestone-diagram .motion-control { right:.75rem; bottom:.4rem; color:#d5e2df; }
.milestone-diagram .motion-control:hover { background:#355b23; }
.milestone-diagram .motion-toggle:focus-visible + .motion-control { outline-color:var(--lime); }
.timeline-track { fill:var(--ink); stroke:var(--lime); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.timeline-track path { fill:none; }
.timeline-labels { fill:#f8fbf3; font:600 11px 'Segoe UI',system-ui,sans-serif; text-anchor:middle; }
.timeline-numbers { fill:#b2e66c; font:11px ui-monospace,Consolas,monospace; text-anchor:middle; }
.timeline-dot { fill:var(--lime); stroke:var(--ink); stroke-width:1.5; transform:translate(32px,54px); }
.milestone-diagram .motion-toggle:checked ~ .milestone-timeline .timeline-dot { animation-play-state:paused; }
@media(prefers-reduced-motion:no-preference) { .timeline-dot { animation:milestone-travel 12s linear infinite; } }
@keyframes milestone-travel {
  0%,5% { transform:translate(32px,54px); }
  12% { transform:translate(32px,138px); }
  21% { transform:translate(144px,138px); }
  28%,33% { transform:translate(144px,54px); }
  40% { transform:translate(144px,138px); }
  49% { transform:translate(256px,138px); }
  56%,61% { transform:translate(256px,54px); }
  68% { transform:translate(256px,138px); }
  77% { transform:translate(368px,138px); }
  84%,95% { transform:translate(368px,54px); opacity:1; }
  97% { transform:translate(368px,54px); opacity:0; }
  98% { transform:translate(32px,54px); opacity:0; }
  100% { transform:translate(32px,54px); opacity:1; }
}

.timeline-labels { font-size:13px; }
.timeline-labels { paint-order:stroke fill; stroke:var(--ink); stroke-width:5px; stroke-linejoin:round; }

/* Aligned milestone icons and labels, with a shallow progress rail below. */
.milestone-diagram { max-width:32rem; padding:1.5rem 1rem 2.5rem; }
.milestone-diagram figcaption { padding-inline:.5rem; }
.timeline-milestones { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; }
.timeline-milestone { text-align:center; min-width:0; color:#f8fbf3; }
.timeline-milestone svg { width:100%; max-width:4rem; margin:auto; fill:none; stroke:var(--lime); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.timeline-milestone span { display:block; margin-top:.45rem; font:600 clamp(.56rem,1vw,.68rem)/1.5 ui-monospace,Consolas,monospace; }
.milestone-timeline { margin-top:.65rem; }
.milestone-rail { fill:none; stroke:var(--lime); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.milestone-points { fill:var(--ink); stroke:var(--lime); stroke-width:1.3; }
.timeline-dot { transform:translate(50px,7px); }
@media(prefers-reduced-motion:no-preference) { .timeline-dot { animation:milestone-icons-travel 12s linear infinite; } }
@keyframes milestone-icons-travel {
  0%,5% { transform:translate(50px,7px); }
  10% { transform:translate(50px,32px); }
  23% { transform:translate(150px,32px); }
  28%,33% { transform:translate(150px,7px); }
  38% { transform:translate(150px,32px); }
  51% { transform:translate(250px,32px); }
  56%,61% { transform:translate(250px,7px); }
  66% { transform:translate(250px,32px); }
  79% { transform:translate(350px,32px); }
  84%,95% { transform:translate(350px,7px); opacity:1; }
  97% { transform:translate(350px,7px); opacity:0; }
  98% { transform:translate(50px,7px); opacity:0; }
  100% { transform:translate(50px,7px); opacity:1; }
}
@media(max-width:34rem) { .milestone-diagram { padding-inline:.5rem; } .timeline-milestone span { font-family:'Segoe UI',system-ui,sans-serif; font-size:.61rem; letter-spacing:-.02em; } }

/* Small head-and-shoulders reminder beside contact details. */
.contact-with-portrait { grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:1rem; width:100%; }
.contact-details { display:grid; justify-items:start; gap:.5rem; min-width:0; }
.contact-details > a:not(.button) { overflow-wrap:anywhere; }
.contact-portrait { width:clamp(4.5rem,9vw,7rem); height:clamp(5.4rem,10.8vw,8.4rem); object-fit:cover; object-position:50% 14%; border-radius:.3rem; border:1px solid var(--line); }
@media(max-width:34rem) { .contact-with-portrait { gap:.75rem; } .contact-portrait { width:4.5rem; height:5.4rem; } }

.contact-portrait { display:block; overflow:hidden; height:clamp(4.5rem,9vw,7rem); }
.contact-portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 0; transform:scale(2); transform-origin:50% 5%; }
@media(max-width:34rem) { .contact-portrait { height:4.5rem; } }

/* Brand icon in contact cards; preserve the complete logo without portrait cropping. */
.contact-brand { display:block; width:clamp(4.5rem,9vw,7rem); align-self:center; }
.contact-brand img { display:block; width:100%; height:auto; object-fit:contain; }
@media(max-width:34rem) { .contact-brand { width:4.5rem; } }