/* Semper Fi Holding. The house style of the company's cards and profile: charcoal, brushed silver
   lettering in Cinzel, one gold rule, and Montserrat for reading. On the site the gold rule becomes the
   conductor in the installation drawing that ties the three lines of work together. */
:root {
  --field: #16191d;
  --field-2: #23272c;
  --brand: #0c4a2e;
  --signal: #c9a45c;
  --gold-ink: #7a5c22;
  --concrete: #eceef0;
  --paper: #f6f7f8;
  --ink: #16191d;
  --steel: #5b636b;
  --rule: #d5d9dd;
  --silver: linear-gradient(180deg, #f4f6f8 0%, #c9ced4 48%, #9aa3ad 100%);
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --wide: normal;
  --narrow: normal;
  font-family: 'Montserrat', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-size: 1rem; line-height: 1.65; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-underline-offset: 3px; }
.contact a, .product a:not(.btn), .line a { color: var(--gold-ink); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--signal); color: var(--ink); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; }
h1, h2, h3 { margin: 0; line-height: 1.12; font-family: var(--display); letter-spacing: .01em; }
.process h3, .line h3, .result h3, .ask header h2 { letter-spacing: .02em; }

/* ---- top bar */
.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem clamp(1rem, 4vw, 3.5rem); background: var(--field); color: #fff; border-bottom: 1px solid rgba(201,164,92,.35); }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.word { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: .04em; text-transform: uppercase;
  background: var(--silver); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand .rule { width: 1px; height: 1.6rem; background: var(--signal); }
.hold { font-family: var(--display); font-weight: 600; font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; color: #d8dce0; }
.bar nav { display: flex; gap: clamp(.6rem, 2vw, 1.6rem); align-items: center; }
.bar nav a { color: #d3d8dd; text-decoration: none; font-size: .95rem; }
.bar nav a:hover { color: #fff; text-decoration: underline; }
.bar nav .nav-cta { color: var(--ink); background: var(--signal); padding: .45rem .95rem; border-radius: 3px; font-weight: 600; }
.bar nav .nav-cta:hover { text-decoration: none; filter: brightness(1.05); }
@media (max-width: 760px) { .bar nav a:not(.nav-cta) { display: none; } }

/* ---- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 1.3rem; border-radius: 3px; font: inherit;
  font-weight: 600; letter-spacing: .01em; text-decoration: none; cursor: pointer; border: 2px solid transparent; }
.btn.solid { background: var(--signal); color: var(--ink); }
.btn.solid:hover { filter: brightness(1.06); }
.btn.solid:disabled { background: #d9dfdc; color: #7b8883; cursor: not-allowed; }
.btn.ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn.ghost:hover { background: rgba(255,255,255,.08); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }

/* ---- hero: the drawing */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding: clamp(2.5rem, 7vw, 6rem) clamp(1rem, 4vw, 3.5rem) clamp(2.5rem, 6vw, 5rem); color: #e6e9ec; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #2a2e33 0%, #16191d 55%, #0f1114 100%); }
.hero::after { content: ''; position: absolute; right: 0; bottom: 0; width: 24%; height: 30%; background: linear-gradient(to top left, #2b2f34 50%, transparent 50.1%); pointer-events: none; }
.hero::before { content: ''; position: absolute; right: 0; bottom: 0; width: 24%; height: 30%; background: linear-gradient(to top left, transparent calc(50% - 1px), var(--signal) 50%, transparent calc(50% + 1px)); pointer-events: none; z-index: 1; }
.hero > * { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); font-weight: 700; line-height: 1.08; max-width: 16ch; background: var(--silver); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .motto { margin: 0 0 1.1rem; color: var(--signal); font-weight: 600; font-size: .9rem; letter-spacing: .12em; }
.hero .motto::after { content: ''; display: block; width: 4.5rem; height: 1px; background: var(--signal); margin-top: .9rem; }
.hero-copy > p:not(.motto) { max-width: 48ch; font-size: 1.05rem; color: #c8cdd2; margin: 1.4rem 0 0; }
.hero-copy > p.where { font-size: .88rem; color: #9aa3ab; margin-top: 1.2rem; }
@media (max-width: 900px) { .hero::before, .hero::after { display: none; } }
.schematic { margin: 0; }
.schematic svg { width: 100%; height: auto; }
.schematic .ink { fill: none; stroke: #b9c0c7; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.schematic .ink .thin { stroke-width: 1.1; }
.schematic .ink .ray { stroke-dasharray: 3 6; stroke: #c9a45c; stroke-opacity: .6; }
.schematic text { fill: #8f979f; stroke: none; font-size: 12px; font-family: inherit; letter-spacing: .04em; }
.schematic .wire { fill: none; stroke: var(--signal); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.schematic .nodes circle { fill: var(--field); stroke: var(--signal); stroke-width: 2.4; }
.schematic .cone { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .schematic .wire { stroke-dashoffset: 1; animation: draw 2.2s .4s cubic-bezier(.6,.1,.3,1) forwards; }
  .js .schematic .nodes circle, .js .schematic .cone { opacity: 0; animation: on .3s forwards; }
  .js .schematic .nodes circle:nth-child(1) { animation-delay: .5s; } .js .schematic .nodes circle:nth-child(2) { animation-delay: .95s; }
  .js .schematic .nodes circle:nth-child(3) { animation-delay: 1.3s; } .js .schematic .nodes circle:nth-child(4) { animation-delay: 1.65s; }
  .js .schematic .nodes circle:nth-child(5) { animation-delay: 2.4s; } .js .schematic .cone { animation-delay: 2.6s; animation-duration: .8s; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes on { to { opacity: 1; } }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .schematic { order: -1; max-width: 560px; } }

/* ---- the three lines of work, hung off one conductor */
.section-title { font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 700; max-width: 24ch; }
.lines { padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 3.5rem); }
.lines .section-title { margin-bottom: 2.5rem; }
.line { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3.2fr); gap: 1.2rem 2.5rem;
  padding: 2rem 0 2.2rem 2.4rem; border-top: 1px solid var(--rule); }
.line::before { content: ''; position: absolute; left: 6.5px; top: 0; bottom: 0; width: 2px; background: var(--signal); }
.line::after { content: ''; position: absolute; left: 0; top: 2.35rem; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); border: 2px solid var(--signal); box-sizing: border-box; }
.line:last-child::before { bottom: auto; height: 2.6rem; }
.line h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; color: var(--ink); }
.line-lead { margin: 0; max-width: 56ch; }
.line ul { margin: 0; padding: 0; list-style: none; font-size: .97rem; }
.line li { padding: .32rem 0; border-bottom: 1px dotted var(--rule); }
.line li:last-child { border-bottom: 0; }
@media (max-width: 900px) { .line { grid-template-columns: 1fr; } }

/* ---- solar estimator */
.estimate { padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 3.5rem); background: var(--concrete); }
.estimate-head h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 700; }
.estimate-head p { max-width: 62ch; color: var(--steel); }
.presets { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1.2rem 0 1.6rem; font-size: .95rem; }
.presets span { color: var(--steel); margin-right: .2rem; }
.presets button { font: inherit; font-size: .92rem; padding: .4rem .8rem; border-radius: 99px; border: 1px solid #b0b7be; background: var(--paper); cursor: pointer; }
.presets button[aria-pressed="true"] { background: var(--field); color: #fff; border-color: var(--field); }
.estimate-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 2rem; align-items: start; }
.loads { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--rule); font-size: .97rem; }
.loads th { text-align: left; font-weight: 600; font-size: .82rem; color: var(--steel); padding: .7rem .8rem; border-bottom: 1px solid var(--signal); background: #fff; }
.loads td { padding: .45rem .8rem; border-bottom: 1px solid #e3e6e9; }
.loads tr.on td:first-child { font-weight: 650; }
.loads tr.on td:first-child::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--signal); border-radius: 50%; margin-right: .5rem; vertical-align: middle; }
.loads td.w { color: var(--steel); font-variant-numeric: tabular-nums; }
.step { display: inline-flex; align-items: center; border: 1px solid #b7bec5; border-radius: 4px; overflow: hidden; }
.step button { width: 34px; height: 34px; border: 0; background: #fff; font: inherit; font-size: 1.1rem; cursor: pointer; }
.step button:hover { background: var(--concrete); }
.step output { min-width: 2.2rem; text-align: center; font-variant-numeric: tabular-nums; }
.loads select { font: inherit; padding: .3rem; border-radius: 4px; border: 1px solid #b7bec5; background: #fff; }
.result { position: sticky; top: 5rem; background: linear-gradient(160deg, #2a2e33, #16191d); border: 1px solid rgba(201,164,92,.45); color: #e6e9ec; padding: 1.5rem; border-radius: 6px; }
.result h3 { font-size: 1.2rem; font-weight: 700; color: #fff; margin-bottom: 1rem; }
.result label.backup { display: grid; gap: .3rem; font-size: .9rem; color: #b5bcc3; }
.result select { font: inherit; padding: .5rem; border-radius: 4px; border: 0; }
.result dl { margin: 1.2rem 0; }
.result dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.result dt { color: #b5bcc3; font-size: .95rem; }
.result dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; }
.result .big dd { font-size: 1.3rem; color: var(--signal); font-weight: 700; }
.result .assume { font-size: .82rem; color: #949ca4; margin: 0 0 1.2rem; }
@media (max-width: 900px) { .estimate-body { grid-template-columns: 1fr; } .result { position: static; } .loads th:nth-child(2), .loads td.w { display: none; } }

/* ---- Semper Ed */
.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 3.5rem); }
.product h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 700; max-width: 20ch; }
.product-copy > p { max-width: 56ch; margin: 1.2rem 0 0; color: #3a4148; }
.product .facts { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .8rem; }
.product .facts li { padding-left: 1.2rem; border-left: 2px solid var(--signal); }
.product .btn.ghost { color: var(--ink); }
.product .btn.ghost:hover { background: var(--concrete); }
.product-shots { position: relative; padding-bottom: 12%; }
.shot-desk { border-radius: 6px; border: 1px solid var(--rule); box-shadow: 0 30px 60px -30px rgba(22,25,29,.45); }
.shot-phone { position: absolute; right: -2%; bottom: 0; width: 30%; border-radius: 18px; border: 6px solid var(--ink); box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
@media (max-width: 900px) { .product { grid-template-columns: 1fr; } }

/* ---- process (a real sequence, so numbered) */
.process { padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 3.5rem); background: linear-gradient(160deg, #23272c, #121417); color: #d3d8dd; }
.process .section-title { margin-bottom: 2rem; background: var(--silver); -webkit-background-clip: text; background-clip: text; color: transparent; }
.process ol { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.process li { counter-increment: step; padding: 1.4rem 1.4rem 0 0; border-top: 1px solid var(--signal); position: relative; }
.process li::before { content: counter(step); position: absolute; top: -.95rem; left: 0; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--signal); color: var(--ink);
  font-weight: 800; font-size: .9rem; display: grid; place-items: center; }
.process h3 { font-size: 1.15rem; font-weight: 700; color: #fff; margin: .6rem 0 .5rem; }
.process p { margin: 0; color: #b5bcc3; max-width: 30ch; }
@media (max-width: 900px) { .process ol { grid-template-columns: 1fr 1fr; row-gap: 2.4rem; } }
@media (max-width: 560px) { .process ol { grid-template-columns: 1fr; } }

/* ---- contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 5rem); padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 3.5rem); }
.contact h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 700; }
.contact-side > p { color: var(--steel); max-width: 40ch; }
.mails { margin: 1.8rem 0; }
.mails div { padding: .8rem 0; border-top: 1px solid var(--rule); }
.mails dt { font-size: .9rem; color: var(--steel); }
.mails dd { margin: .1rem 0 0; font-size: 1.12rem; font-weight: 600; }
.mails a { text-decoration: none; } .mails a:hover { text-decoration: underline; }
.contact .btn.ghost { color: var(--ink); }
.enquiry { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; background: #fff; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--rule); border-top: 3px solid var(--signal); border-radius: 4px; align-content: start; }
.field { display: grid; gap: .35rem; grid-column: 1 / -1; }
.field.half { grid-column: auto; }
.field label { font-weight: 600; font-size: .95rem; }
.field label span { font-weight: 400; color: var(--steel); }
.field input, .field select, .field textarea { font: inherit; padding: .65rem .75rem; border: 1px solid #b0b7be; border-radius: 4px; background: var(--paper); width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--signal); outline-offset: 0; border-color: var(--brand); }
.field [aria-invalid="true"] { border-color: #a3271b; }
.hp { position: absolute; left: -5000px; }
.attached { grid-column: 1 / -1; margin: 0; padding: .7rem .9rem; background: #f7efdc; border-left: 3px solid var(--signal); font-size: .93rem; }
.form-msg { grid-column: 1 / -1; margin: 0; min-height: 1.2em; font-weight: 600; }
.form-msg.error { color: #a3271b; } .form-msg.ok { color: var(--brand); }
.enquiry .btn { justify-self: start; }
.fine { grid-column: 1 / -1; margin: 0; font-size: .85rem; color: var(--steel); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .field.half { grid-column: 1 / -1; } }

/* ---- footer */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; padding: 2.5rem clamp(1rem, 4vw, 3.5rem); background: var(--ink); color: #b7bec5; font-size: .93rem; }
.foot .word { font-size: 1.2rem; } .foot .hold { margin-left: .6rem; } .foot .tagline { color: var(--signal); font-style: italic; font-weight: 500; }
.foot p { margin: .3rem 0 0; }
.foot nav { display: flex; flex-direction: column; gap: .4rem; }
.foot a { color: #d3d8dd; }
.foot .copy { flex-basis: 100%; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1rem; margin: 0; }

/* ---- Ask Semper */
.ask-fab { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 6; font: inherit; font-weight: 600; padding: .85rem 1.15rem; border-radius: 99px; border: 1px solid rgba(201,164,92,.6);
  background: var(--field); color: #fff; box-shadow: 0 10px 30px -10px rgba(0,0,0,.45); cursor: pointer; display: flex; gap: .55rem; align-items: center; }
.ask-fab::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(201,164,92,.3); }
.ask-fab[aria-expanded="true"] { display: none; }
.ask { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 7; width: min(400px, calc(100vw - 2.4rem)); height: min(560px, calc(100vh - 6rem));
  display: flex; flex-direction: column; background: #fff; border-radius: 10px; box-shadow: 0 25px 60px -15px rgba(0,0,0,.45); overflow: hidden; }
.ask[hidden] { display: none; }
.ask header { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1rem; background: var(--field); color: #fff; border-bottom: 1px solid var(--signal); }
.ask header h2 { font-size: 1.05rem; }
.ask-close { border: 0; background: none; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; width: 36px; height: 36px; }
.ask-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; background: var(--paper); }
.msg { margin: 0; padding: .65rem .85rem; border-radius: 10px; max-width: 88%; font-size: .97rem; white-space: pre-line; }
.msg.bot { background: #fff; border: 1px solid var(--rule); align-self: flex-start; }
.msg.me { background: var(--field); color: #fff; align-self: flex-end; }
.msg.wait { color: var(--steel); font-style: italic; }
.chips { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.chips button { font: inherit; font-size: .9rem; text-align: left; padding: .45rem .7rem; border-radius: 8px; border: 1px dashed #a7aeb5; background: transparent; cursor: pointer; color: var(--brand); }
.chips button:hover { background: #fff; }
.ask-form { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--rule); background: #fff; }
.ask-form input { flex: 1; font: inherit; padding: .6rem .7rem; border: 1px solid #b0b7be; border-radius: 6px; min-width: 0; }
.ask-form .btn { min-height: 42px; }

/* ---- small pages */
.page { max-width: 760px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) 1.2rem; }
.page h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; margin-bottom: 1.2rem; }
.page h2 { font-size: 1.2rem; margin: 2rem 0 .5rem; }