/* contact.html. House variables only. Layout for the hero, the two paths,
   the detail rows, the directors, the online block and the last row. */
.c-hero{padding-bottom:var(--section)}
.c-hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--mcf-s8);align-items:center;padding-top:var(--mcf-s6)}
.c-hero-text{display:flex;flex-direction:column;gap:var(--mcf-s5)}
.c-hero-text .t-display{max-width:14ch}
.c-hero-lines{display:flex;flex-wrap:wrap;gap:var(--mcf-s3) var(--mcf-s6);padding-top:var(--mcf-s3)}
.c-hero-lines a{display:inline-flex;align-items:center;gap:var(--mcf-s2);font-size:var(--mcf-size-heading);font-weight:500;color:var(--mcf-ink);font-variant-numeric:tabular-nums}
.c-hero-lines a:hover{color:var(--mcf-blue)}
.c-hero-lines .ico{width:20px;height:20px;color:var(--mcf-blue)}
.c-hero-media{display:flex;justify-content:flex-end}
.c-hero-media .illo{width:100%;max-width:440px}

/* The two paths. */
.paths{display:grid;grid-template-columns:5fr 7fr;gap:var(--mcf-s5)}
.path{background:var(--mcf-card);border-radius:var(--mcf-r-card);padding:var(--mcf-s8);display:flex;flex-direction:column;gap:var(--mcf-s3)}
.path>.ico{width:32px;height:32px;color:var(--mcf-grey-strong);margin-bottom:var(--mcf-s3)}
.path>.muted{max-width:44ch;text-wrap:pretty}
.path-foot{margin-top:auto;padding-top:var(--mcf-s6)}
.ask-form{max-width:none;margin-top:var(--mcf-s4);gap:var(--mcf-s4)}
.ask-form textarea{min-height:96px}
.ask-form .sent[hidden]{display:none}

/* The detail rows. */
.c-details{display:grid;grid-template-columns:4fr 8fr;gap:var(--mcf-s8)}
.c-details-head p{max-width:36ch}
.c-rows{border-top:1px solid var(--mcf-line)}
.c-row{display:grid;grid-template-columns:24px 180px 1fr auto;gap:var(--mcf-s4);align-items:baseline;padding:var(--mcf-s5) 0;border-bottom:1px solid var(--mcf-line)}
.c-row>.ico{width:20px;height:20px;color:var(--mcf-grey);align-self:start;margin-top:2px}
.c-k{font-size:var(--mcf-size-table);color:var(--mcf-grey)}
.c-v{font-size:var(--mcf-size-heading);line-height:1.45;color:var(--mcf-ink);overflow-wrap:anywhere}
.c-v a{color:var(--mcf-ink)}
.c-v a:hover{color:var(--mcf-blue)}
.c-act{font-size:var(--mcf-size-table);font-weight:500}

/* The directors. */
.c-dir-lead{max-width:60ch}
.c-dirs{display:grid;grid-template-columns:1fr 1fr;gap:var(--mcf-s5);margin-top:var(--mcf-s7)}
.c-dir{display:grid;grid-template-columns:200px 1fr;gap:var(--mcf-s6);background:var(--mcf-card);border-radius:var(--mcf-r-card);padding:var(--mcf-s5);align-items:start}
.c-dir img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:var(--mcf-r-inner)}
.c-dir-body{display:flex;flex-direction:column;gap:var(--mcf-s2);padding-top:var(--mcf-s2)}
.c-tag{font-size:var(--mcf-size-small);color:var(--mcf-grey);margin-top:calc(-1 * var(--mcf-s1))}
.c-dir-body .muted{margin-top:var(--mcf-s2);font-size:var(--mcf-size-table);line-height:1.55;text-wrap:pretty}
.c-dir-links{display:flex;flex-direction:column;gap:var(--mcf-s2);margin-top:var(--mcf-s3);padding-top:var(--mcf-s3);border-top:1px solid var(--mcf-line-soft);font-size:var(--mcf-size-table)}
.c-dir-links li{display:flex;align-items:center;gap:var(--mcf-s2);min-width:0}
.c-dir-links a{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.c-dir-links .ico{width:16px;height:16px;color:var(--mcf-grey);flex-shrink:0}
.c-about{display:inline-flex}
/* The team: all three, side by side on a laptop, each a picture over its words
   (WEB-059). Donnie's portrait is his Mackenzie drawing on the house blue tint,
   cropped like the two photos. */
.c-dir-pic{border-radius:var(--mcf-r-inner);overflow:hidden}
.c-dir-donnie{position:relative;background:var(--mcf-blue-tint) url(/pictures/team-backdrop.jpg) center/cover no-repeat;aspect-ratio:4/5;display:flex;justify-content:center;align-items:flex-start}
.c-dir .c-dir-donnie img{width:150%;max-width:none;flex-shrink:0;aspect-ratio:auto;object-fit:contain;margin-top:4%;border-radius:0}
.c-div{font-size:var(--mcf-size-small);font-weight:600;color:var(--mcf-blue);letter-spacing:.06em;text-transform:uppercase}
.c-roots{grid-template-columns:7fr 5fr}
.c-roots-pic .illo,.c-roots-pic svg{width:100%;height:auto;display:block}
@media (max-width:1000px){.c-roots{grid-template-columns:1fr}.c-roots-pic{max-width:520px}}
.c-dir-chat{font-size:inherit;color:var(--mcf-blue);text-align:left}
@media (min-width:1001px){
  .c-team{grid-template-columns:repeat(3,minmax(0,1fr))}
  .c-team .c-dir{grid-template-columns:1fr;align-content:start}
  .c-team .c-dir img,.c-team .c-dir-donnie{aspect-ratio:1/1;height:auto}
  .c-team .c-dir .c-dir-donnie img{aspect-ratio:auto;width:120%;margin-top:6%}
}

/* Online, wherever you are. */
.c-visit{display:grid;grid-template-columns:5fr 7fr;gap:var(--mcf-s8);align-items:center}
.c-visit-text .muted{max-width:52ch;text-wrap:pretty}
.c-visit .slot{width:100%;aspect-ratio:4/3}
.c-online{grid-template-columns:1fr}.c-online .c-visit-text{max-width:720px}

/* Last row: socials, a review, the chat. */
.c-else{border-top:1px solid var(--mcf-line)}
.c-else.band{padding-block:var(--mcf-s8) var(--section)}
.c-else-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--mcf-s8)}
.c-else-item{display:flex;flex-direction:column;gap:var(--mcf-s3);align-items:flex-start}
.c-else-item .muted{text-wrap:pretty;max-width:40ch}
.c-social{display:flex;flex-wrap:wrap;gap:var(--mcf-s2)}
.c-social a{display:inline-flex;align-items:center;gap:var(--mcf-s2);min-height:40px;padding:0 var(--mcf-s4) 0 var(--mcf-s3);border:1px solid var(--mcf-line);border-radius:var(--mcf-r-pill);color:var(--mcf-ink);font-size:var(--mcf-size-table);font-weight:500}
.c-social a:hover{border-color:var(--mcf-control);color:var(--mcf-blue)}
.c-social .ico{width:18px;height:18px}
.c-chat{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;font-size:var(--mcf-size-body)}

@media (max-width:1000px){
  .paths,.c-details,.c-visit{grid-template-columns:1fr}
  .c-dirs{grid-template-columns:1fr}
}
@media (max-width:900px){
  .c-hero-grid{grid-template-columns:1fr;gap:var(--mcf-s6)}
  .c-hero-media{justify-content:flex-start}
  .c-hero-media .illo{max-width:300px}
  .c-else-grid{grid-template-columns:1fr;gap:var(--mcf-s6)}
}
@media (max-width:640px){
  .c-hero-grid{padding-top:var(--mcf-s2)}
  .path{padding:var(--mcf-s5)}
  .path-foot .btn{width:100%}
  .c-row{grid-template-columns:24px 1fr auto;row-gap:var(--mcf-s1)}
  .c-row .c-k{grid-column:2}
  .c-row .c-v{grid-column:2;grid-row:2;font-size:var(--mcf-size-body)}
  .c-row .c-act{grid-column:3;grid-row:1}
  .c-dir{grid-template-columns:96px 1fr;gap:var(--mcf-s4);padding:var(--mcf-s4)}
  .c-dir-links{grid-column:1 / -1}
}
.ask-form [hidden]{display:none!important}
.path-list{display:flex;flex-direction:column;gap:var(--mcf-s3);margin-top:var(--mcf-s5);padding-top:var(--mcf-s5);border-top:1px solid var(--mcf-line-soft);font-size:var(--mcf-size-table)}
.path-list li{display:grid;grid-template-columns:20px 1fr;gap:var(--mcf-s2);align-items:start}
.path-list .ico{width:16px;height:16px;margin-top:2px;color:var(--mcf-ok)}
@media (max-width:640px){.c-hero-media .illo{max-width:200px}}

/* PHONE THUMBS (Martin, 14 October 2026: "every page we build must also be
   optimised for easy viewing on a phone"). On a phone everything pressed is at
   least 44 pixels each way - Apple's guidelines, the house north star -
   held by tools/check-mockups.mjs at 390 and 375. */
@media (max-width:767px){
  .c-chat{min-height:44px}
}

/* WEB-060 (register S237): the page in Martin's order. */
.c-roots-hero{padding-bottom:var(--section)}
.c-roots-hero .c-roots{margin-top:var(--mcf-s5);align-items:center}
.c-roots-hero .actions{display:flex;flex-wrap:wrap;gap:var(--mcf-s3);align-items:center}
.c-dir .c-dir-donnie img{position:relative}

/* Reviews: a row that rolls sideways; each a card with its stars, its words and where it was left. */
.c-rev-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--mcf-s3)}
.c-rev-head .muted{font-size:var(--mcf-size-table)}
.c-rev-roll{margin-top:var(--mcf-s6);overflow:hidden}
.c-rev-track{display:flex;gap:var(--mcf-s5);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--mcf-s2)}
.c-rev{flex:0 0 min(340px,85%);scroll-snap-align:start;background:var(--mcf-card);border-radius:var(--mcf-r-card);padding:var(--mcf-s5)}
.c-rev-track:not(:empty) + .c-rev-empty{display:none}
.c-rev-empty{border:1.5px dashed var(--mcf-line);border-radius:var(--mcf-r-card);padding:var(--mcf-s6);color:var(--mcf-grey);text-align:center}

/* The UK map, and the cities to fly to. */
.c-uk{display:grid;grid-template-columns:5fr 7fr;gap:var(--mcf-s8);align-items:center}
.c-uk-map .illo,.c-uk-map svg{width:100%;height:auto;display:block;max-width:560px;margin-inline:auto}
.c-fly{display:flex;flex-wrap:wrap;gap:var(--mcf-s2);margin-top:var(--mcf-s4)}
.c-fly-btn{min-height:40px;padding:0 var(--mcf-s4);border:1px solid var(--mcf-line);border-radius:var(--mcf-r-pill);background:var(--mcf-card);color:var(--mcf-ink);font:inherit;font-size:var(--mcf-size-table);font-weight:500;cursor:pointer}
.c-fly-btn:hover,.c-fly-btn[aria-pressed="true"]{border-color:var(--mcf-blue);color:var(--mcf-blue)}
.um-dot{fill:var(--mcf-ink);fill-opacity:.55}
.um-dot-plane{fill:var(--mcf-blue);fill-opacity:.7}
.um-dot-ferry{fill:var(--mcf-blue);fill-opacity:.55}
.um-dots{transition:opacity .8s}
.um-dots.is-fading{opacity:0}
@media (prefers-reduced-motion:reduce){.um-veh{display:none}}

/* A message to the management team. */
.c-msg{display:grid;grid-template-columns:5fr 7fr;gap:var(--mcf-s8);align-items:start}

/* How to reach us: blue tabs, three facts, the office on its street map. */
.c-reach{display:grid;grid-template-columns:5fr 7fr;gap:var(--mcf-s8);align-items:center}
.c-tabs{display:flex;flex-wrap:wrap;gap:var(--mcf-s2);margin-top:var(--mcf-s5)}
.c-tab{display:inline-flex;align-items:center;gap:var(--mcf-s2);min-height:44px;padding:0 var(--mcf-s4);border-radius:var(--mcf-r-pill);background:var(--mcf-blue);color:var(--mcf-card);font-weight:600;font-size:var(--mcf-size-table);font-variant-numeric:tabular-nums}
.c-tab:hover{background:var(--mcf-blue-hover);color:var(--mcf-card)}
.c-tab .ico{width:16px;height:16px}
.c-facts{display:grid;gap:var(--mcf-s3);margin-top:var(--mcf-s5);font-size:var(--mcf-size-table)}
.c-facts dt{font-size:var(--mcf-size-small);color:var(--mcf-grey);font-weight:600}
.c-visit-note{margin-top:var(--mcf-s4);font-size:var(--mcf-size-small)}
.c-reach-map .illo,.c-reach-map svg{width:100%;height:auto;display:block;border-radius:var(--mcf-r-card)}
.c-review-links{display:flex;flex-direction:column;gap:var(--mcf-s2)}

@media (max-width:1000px){
  .c-uk,.c-msg,.c-reach{grid-template-columns:1fr;gap:var(--mcf-s6)}
}
@media (max-width:767px){
  .c-fly-btn{min-height:44px}
  .c-tab{overflow-wrap:anywhere}
}

/* The short Contact page (register S240): the crumbs and a link to About, then the message. */
.c-contact-top{padding-bottom:0}
.c-about-link{margin-top:var(--mcf-s4)}
.c-msg-band{padding-top:var(--mcf-s6)}

/* A review card (register S242): five stars, the words as left, who and where. */
.c-rev{display:flex;flex-direction:column;gap:var(--mcf-s3)}
.c-rev-stars{display:flex;gap:2px}
.c-star{width:18px;height:18px;fill:var(--mcf-blue)}
.c-rev-words{margin:0;font-size:var(--mcf-size-body);line-height:1.55;text-wrap:pretty}
.c-rev-words p::before{content:"\201C"}.c-rev-words p::after{content:"\201D"}
.c-rev-who{margin-top:auto;font-size:var(--mcf-size-small);color:var(--mcf-grey)}
.c-rev-who b{color:var(--mcf-ink);font-weight:600;margin-right:var(--mcf-s1)}
.c-rev-track:focus-visible{outline:2px solid var(--mcf-blue);outline-offset:4px;border-radius:var(--mcf-r-card)}
/* The About page's three steps (WEB-078 round, 25 October 2026): numbered, with room between. */
.c-steps{list-style:decimal;padding-left:1.4em;max-width:640px}
.c-steps li{margin-top:var(--mcf-s2);padding-left:var(--mcf-s1)}