/* ── inner-page components ─────────────────────────────────────────────
   Extends site.css. Only loaded on pages other than the homepage.      */

/* breadcrumb */
.crumb{font:500 13px/1 var(--body);color:var(--ink-faint);padding:18px 0 0}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.crumb li:not(:last-child)::after{content:"/";margin-left:8px;color:var(--line-2)}
.crumb a{color:var(--ink-soft);text-decoration:none}
.crumb a:hover{color:var(--brass)}

/* page hero */
.phero{background:var(--tint);border-bottom:1px solid var(--line);
  padding:34px 0 64px;position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;right:-120px;top:-140px;width:460px;height:460px;
  border-radius:50%;background:radial-gradient(circle,rgba(192,135,44,.13),transparent 68%);
  animation:floaty 14s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translate(0,0)}50%{transform:translate(-26px,24px)}}
.phero h1{font:800 clamp(34px,4.6vw,60px)/1.06 var(--display);color:var(--navy);
  letter-spacing:-.025em;margin:14px 0 0;max-width:19ch}
.phero .lede{font:400 clamp(17px,1.55vw,21px)/1.62 var(--body);color:var(--ink-soft);
  max-width:60ch;margin:20px 0 0}
.phero .hero-actions{margin-top:30px}

/* article prose */
.prose{max-width:72ch}
.prose h2{font:700 clamp(25px,2.5vw,34px)/1.18 var(--display);color:var(--navy);
  letter-spacing:-.018em;margin:54px 0 16px}
.prose h3{font:700 19px/1.3 var(--display);color:var(--navy);margin:34px 0 10px}
.prose p{font:400 17px/1.72 var(--body);color:var(--ink);margin:0 0 17px}
.prose ul{margin:0 0 20px;padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:26px;margin-bottom:11px;
  font:400 17px/1.66 var(--body);color:var(--ink)}
.prose ul li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;
  border-radius:50%;background:var(--brass)}
.prose strong{font-weight:600;color:var(--navy)}
.prose a{color:var(--navy);text-decoration-color:var(--brass);text-underline-offset:3px}
.prose a:hover{color:var(--brass)}

/* two-column layout for long pages */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:68px;align-items:start}
@media(max-width:980px){.layout{grid-template-columns:1fr;gap:44px}}

/* sticky aside */
.aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
@media(max-width:980px){.aside{position:static}}
.panel{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.panel h3{font:700 13px/1 var(--display);letter-spacing:.09em;text-transform:uppercase;
  color:var(--brass);margin:0 0 14px}
.panel ul{list-style:none;margin:0;padding:0}
.panel li{font:400 15px/1.5 var(--body);color:var(--ink-soft);padding:9px 0;
  border-bottom:1px solid var(--line)}
.panel li:last-child{border-bottom:0}
.panel a{color:var(--navy);text-decoration:none}
.panel a:hover{color:var(--brass)}
.panel.dark{background:var(--navy);border-color:var(--navy-2)}
.panel.dark h3{color:var(--brass)}
.panel.dark p{font:400 15px/1.6 var(--body);color:rgba(255,255,255,.76);margin:0 0 16px}

/* spec table */
.spec{width:100%;border-collapse:collapse;margin:8px 0 26px;
  font:400 15.5px/1.5 var(--body);min-width:0}
.spec tr:last-child td,.spec tr:last-child th{border-bottom:1px solid var(--line)}
.spec caption{text-align:left;font:700 13px/1 var(--display);letter-spacing:.09em;
  text-transform:uppercase;color:var(--brass);padding-bottom:12px}
.spec thead th{text-align:left;font:600 13px/1.3 var(--body);letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-faint);padding:0 14px 11px 0;
  border-bottom:2px solid var(--line-2)}
.spec td,.spec tbody th{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);
  color:var(--ink);vertical-align:top;text-align:left}
.spec tbody th{font:600 15.5px/1.5 var(--body);color:var(--navy);white-space:nowrap;
  text-transform:none;letter-spacing:normal;font-family:var(--body)}
.spec tr:hover td,.spec tr:hover tbody th{background:var(--tint)}

/* standards chips */
.std{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 26px;padding:0;list-style:none}
.std li{font:600 12.5px/1 var(--body);letter-spacing:.03em;color:var(--navy);
  background:var(--page);border:1px solid var(--line-2);border-radius:999px;padding:9px 14px;
  transition:border-color .2s ease,transform .2s ease}
.std li:hover{border-color:var(--brass);transform:translateY(-2px)}

/* FAQ */
.faq{border-top:1px solid var(--line);margin-top:10px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font:600 17.5px/1.45 var(--display);color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:27px;width:10px;height:10px;
  border-right:2px solid var(--brass);border-bottom:2px solid var(--brass);
  transform:rotate(45deg);transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--brass)}
.faq .ans{padding:0 0 22px;font:400 16.5px/1.68 var(--body);color:var(--ink-soft);max-width:70ch}

/* child service cards */
.kids{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px;margin-top:8px}
.kid{display:block;background:var(--page);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;text-decoration:none;position:relative;overflow:hidden;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.kid::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brass);
  transform:scaleY(0);transform-origin:top;transition:transform .3s ease}
.kid:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:var(--shadow)}
.kid:hover::before{transform:scaleY(1)}
.kid h3{font:700 19.5px/1.3 var(--display);color:var(--navy);margin:0 0 9px;letter-spacing:-.012em}
.kid p{font:400 15.5px/1.6 var(--body);color:var(--ink-soft);margin:0}
.kid .go{display:inline-block;margin-top:14px;font:600 13px/1 var(--body);
  letter-spacing:.06em;text-transform:uppercase;color:var(--brass)}
.kid:hover .go{transform:translateX(4px)}
.kid .go{transition:transform .25s ease}

/* card with a product thumbnail on top */
.kid.has-thumb{padding:0 0 26px}
.kid .kthumb{display:block;width:100%;height:150px;object-fit:cover;margin:0 0 21px;
  background:var(--tint);border-bottom:1px solid var(--line)}
.kid.has-thumb h3,.kid.has-thumb p,.kid.has-thumb .go{margin-left:24px;margin-right:24px}

/* product figure grid. Catalogue sources are modest resolution, so tiles are
   kept small; `.g-wide` is for the panoramic strips that span the column. */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:30px 0 34px;
  align-items:start}
.gallery figure{margin:0;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--tint)}
.gallery img{display:block;width:100%;height:auto}
.gallery .g-wide{grid-column:1 / -1}
@media(max-width:640px){.gallery{grid-template-columns:1fr}}

/* figure with caption */
.shot{margin:34px 0 30px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{font:400 14px/1.5 var(--body);color:var(--ink-faint);
  padding:13px 16px;background:var(--tint);border-top:1px solid var(--line)}

/* callout */
.note{background:var(--brass-soft);border-left:3px solid var(--brass);border-radius:0 var(--r) var(--r) 0;
  padding:20px 24px;margin:28px 0;font:400 16px/1.65 var(--body);color:#5C3F0E}
.note strong{color:#44300B;font-weight:700}

/* contact grid */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:10px}
.cbox{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.cbox h3{font:700 13px/1 var(--display);letter-spacing:.09em;text-transform:uppercase;
  color:var(--brass);margin:0 0 12px}
.cbox p{font:400 16px/1.6 var(--body);color:var(--ink);margin:0 0 6px}
.cbox a{color:var(--navy);text-decoration:none;font-weight:600}
.cbox a:hover{color:var(--brass)}

/* ── team grid ─────────────────────────────────────────────────────── */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:22px;margin-top:8px}
.person{margin:0;background:var(--page);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.person:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:var(--shadow)}
.person img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.person .mono{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;
  background:linear-gradient(160deg,var(--tint),var(--sheet,var(--tint)));
  border-bottom:1px solid var(--line)}
.person .mono span{font:700 44px/1 var(--display);letter-spacing:-.02em;color:var(--line-2)}
.person figcaption{padding:16px 16px 18px;text-align:center;border-top:1px solid var(--line)}
.person b{display:block;font:700 16.5px/1.3 var(--display);color:var(--navy);letter-spacing:-.01em}
.person span{display:block;margin-top:5px;font:400 14px/1.45 var(--body);color:var(--ink-soft)}
.sec-tint .person{background:var(--page)}
@media(max-width:520px){.people{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .person b{font-size:15px}.person span{font-size:13px}}

/* ── product catalogue index ───────────────────────────────────────── */
.catalog{list-style:none;counter-reset:cat;margin:6px 0 26px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:0 28px}
.catalog li{counter-increment:cat;position:relative;padding:11px 0 11px 44px;
  border-bottom:1px solid var(--line)}
.catalog li::before{content:counter(cat,decimal-leading-zero);position:absolute;left:0;top:12px;
  font:600 12px/1 var(--body);color:var(--brass);letter-spacing:.04em}
.catalog b{display:block;font:600 15.5px/1.45 var(--body);color:var(--navy)}
.catalog span{display:block;margin-top:3px;font:400 14px/1.5 var(--body);color:var(--ink-soft)}
.stdref{font:400 15px/1.7 var(--body);color:var(--ink-soft);background:var(--tint);
  border-left:3px solid var(--line-2);padding:16px 20px;border-radius:0 var(--r) var(--r) 0}

/* ── application form ──────────────────────────────────────────────── */
.apply{margin-top:22px;max-width:760px}
.apply .frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0 18px}
.apply .fld{display:flex;flex-direction:column;gap:6px;margin:0 0 16px}
.apply label{font:600 13px/1.4 var(--body);color:var(--ink)}
.apply label span{color:var(--brass)}
.apply input[type=text],.apply input[type=email],.apply input[type=tel],
.apply input[type=number],.apply select,.apply textarea,.apply input[type=file]{
  font:400 15px/1.5 var(--body);color:var(--ink);background:var(--page);
  border:1px solid var(--line-2);border-radius:var(--r);padding:10px 12px;width:100%}
.apply textarea{resize:vertical;min-height:92px}
.apply input[type=file]{padding:9px 12px}
.apply input:focus-visible,.apply select:focus-visible,.apply textarea:focus-visible{
  outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass)}
.apply .hint{font:400 13px/1.55 var(--body);color:var(--ink-faint);margin:0}
.apply .fld .hint{margin-top:-2px}
.apply .ferr{font:500 14px/1.5 var(--body);color:#9a2a16;background:#fdeeea;
  border:1px solid #f2c6bc;border-radius:var(--r);padding:11px 13px;margin:0 0 16px}
.apply .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.apply .btn{display:inline-flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:var(--r);
  padding:13px 26px;font:600 15px/1 var(--body);cursor:pointer;
  transition:opacity .2s ease}
.apply .btn:hover{opacity:.88}
.apply .btn:disabled{opacity:.5;cursor:not-allowed}
.apply.sent{display:none}
.applyok{border:1px solid var(--line);border-left:3px solid var(--brass);
  border-radius:0 var(--r) var(--r) 0;background:var(--page);padding:22px 24px;
  margin-top:22px;max-width:760px}
.applyok h3{font:700 19px/1.3 var(--display);margin:0 0 7px;color:var(--navy)}
.applyok p{margin:0;font-size:15px;color:var(--ink-soft)}