/* Firesky Consultants - site styles. Fonts are self-hosted (no third-party requests). */
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:italic;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/cormorant-garamond-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:500;font-display:swap;src:url(fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:600;font-display:swap;src:url(fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2")}

:root{
  --ground:#ededed;      /* matches the pale field of the artwork */
  --ink:#1b1c1e;
  --mute:#3f4245;
  --ember:#7d2a1e;       /* the one accent */
  --rule:rgba(27,28,30,.16);
  --serif:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --gutter:4.5vw;
}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:22px;line-height:1.42;-webkit-font-smoothing:antialiased}

/* The original artwork, untouched: full-bleed, anchored right, fixed behind every page. */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--ground) url(../images/full-width-images/section-bg-3.jpg) right center/cover no-repeat}

a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--ember);outline-offset:4px}

.page{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto}

/* Header */
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;padding:20px var(--gutter) 0}
.brand{font-family:var(--serif);font-weight:700;font-size:1.75rem;letter-spacing:.01em;display:block;line-height:1.1}
.reach{display:flex;gap:18px;flex-wrap:wrap;margin-top:5px;font-size:.95rem;font-weight:500}
.reach a{border-bottom:1px solid var(--ember);padding-bottom:1px}
.reach a:hover{color:var(--ember)}
.top nav{display:flex;gap:30px;flex-wrap:wrap}
.top nav a{font-size:.95rem;color:var(--mute);padding-bottom:4px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.top nav a:hover{color:var(--ink)}
.top nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ember)}

/* Stage: content keeps to the pale side of the artwork */
.stage{padding:12px var(--gutter);display:flex;align-items:center}
.col{width:min(64vw,1100px);animation:settle .7s ease-out both}
@keyframes settle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.col{animation:none}}

h1{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,3.9vw,3.4rem);line-height:1.02;letter-spacing:-.012em;margin:0 0 14px;max-width:24ch}
.lede{font-size:1.05rem;color:var(--ink);max-width:64ch;margin:0 0 20px}
h2{font-family:var(--serif);font-weight:500;font-size:1.4rem;line-height:1.2;margin:0 0 4px}
p{margin:0}
.small{font-size:.92rem;color:var(--mute)}
.note{font-size:.92rem;color:var(--mute);margin-top:14px;max-width:64ch}

/* Figures */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:0;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.figs.three{grid-template-columns:repeat(3,1fr)}
.figs div{display:flex;flex-direction:column}
.figs dd{order:-1}
.figs dt{font-size:.9rem;color:var(--mute);line-height:1.3;margin-top:2px}
.figs dd{margin:0;font-family:var(--serif);font-weight:500;font-size:2.1rem;line-height:1;color:var(--ember);font-variant-numeric:lining-nums}

/* Linked rows */
.rows{list-style:none;margin:18px 0 0;padding:0}
.rows li{border-top:1px solid var(--rule)}
.rows li:last-child{border-bottom:1px solid var(--rule)}
.rows a,.rows .row{display:grid;grid-template-columns:minmax(200px,1fr) 1.5fr;gap:24px;align-items:baseline;padding:10px 0}
.rows a{transition:padding-left .2s,color .2s}
.rows a:hover{padding-left:8px;color:var(--ember)}
.rows span:last-child{font-size:.92rem;color:var(--mute)}

/* Two doors on the home page */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:20px}
.doors a{display:block;border-top:2px solid var(--ink);padding-top:14px;transition:border-color .2s}
.doors a:hover{border-top-color:var(--ember)}
.doors a:hover h2{color:var(--ember)}
.doors p{font-size:.93rem;color:var(--mute);margin-top:4px}
.doors .go{display:inline-block;margin-top:10px;font-size:.9rem;font-weight:500;color:var(--ink);border-bottom:1px solid var(--ember);padding-bottom:2px}

/* Flow diagram (integration) */
.flow{display:grid;grid-template-columns:1fr 28px 1.5fr 28px 1fr;align-items:stretch;margin:0 0 22px}
.flow .box{border:1px solid var(--ink);padding:14px 16px;display:flex;flex-direction:column;justify-content:center}
.flow .box.solid{background:var(--ink);color:#f2f2f2}
.flow .box b{font-family:var(--serif);font-weight:500;font-size:1.25rem;line-height:1.15}
.flow .box span{font-size:.88rem;opacity:.8;margin-top:3px}
.flow .mid{border:0;padding:0;display:grid;gap:5px}
.flow .mid div{border:1px solid var(--rule);background:rgba(255,255,255,.45);padding:4px 12px;font-size:.9rem}
.flow .arrow{position:relative}
.flow .arrow::before{content:"";position:absolute;left:3px;right:5px;top:50%;border-top:1px solid var(--ink)}
.flow .arrow::after{content:"";position:absolute;right:4px;top:50%;width:7px;height:7px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);transform:translateY(-50%) rotate(45deg)}

/* Timeline (telecom) */
.line{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(6,1fr);position:relative}
.line::before{content:"";position:absolute;left:0;right:0;top:27px;border-top:1px solid var(--ink)}
.line li{padding-right:12px;position:relative}
.line time{display:block;font-size:.86rem;color:var(--mute);height:22px;font-variant-numeric:tabular-nums}
.line li::before{content:"";display:block;position:absolute;top:22px;left:0;width:11px;height:11px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 3px var(--ground)}
.line b{display:block;margin-top:24px;font-family:var(--serif);font-weight:500;font-size:1.18rem;line-height:1.15}
.line span{display:block;font-size:.88rem;color:var(--mute);line-height:1.35;margin-top:3px}

/* Two-panel pages */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:38px}
.pair>div{border-top:2px solid var(--ink);padding-top:14px}
.pair p{font-size:.93rem;color:var(--mute);margin-top:6px}
.pair ul.plain{margin:8px 0 10px;padding:0;list-style:none}
.pair ul.plain li{font-size:.93rem;color:var(--mute);padding:5px 0;border-top:1px solid var(--rule)}
.pair ul.plain li:last-child{border-bottom:1px solid var(--rule)}
.dots{display:grid;grid-template-columns:repeat(13,1fr);gap:5px;margin:14px 0 6px;max-width:300px}
.dots i{aspect-ratio:1;border:1px solid var(--ink);border-radius:50%}
.dots i.on{background:var(--ember);border-color:var(--ember)}
.bars{margin:14px 0 6px;display:grid;gap:8px}
.bars div{font-size:.88rem;color:var(--mute)}
.bars i{display:block;height:10px;margin-bottom:3px;background:var(--ink)}
.bars .after i{width:50%;background:var(--ember)}
.kv{display:flex;gap:22px;flex-wrap:wrap;margin-top:10px;font-size:.9rem;color:var(--mute)}
.kv b{font-family:var(--serif);font-weight:500;font-size:1.3rem;color:var(--ink);margin-right:5px}

/* Stages (a true sequence) */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;border-top:1px solid var(--ink)}
.steps.three{grid-template-columns:repeat(3,1fr)}
.steps li{counter-increment:s;padding-top:12px;position:relative}
.steps li::before{content:counter(s);font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ember);display:block;margin-bottom:2px}
.steps b{font-family:var(--serif);font-weight:500;font-size:1.25rem;display:block;line-height:1.15}
.steps span{font-size:.9rem;color:var(--mute);display:block;margin-top:4px;line-height:1.4}

/* Corridor graphic */
.corridor{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin:0 0 6px;max-width:420px;font-family:var(--serif);font-size:1.3rem;font-weight:500}
.corridor i{height:1px;background:var(--ink);position:relative}
.corridor i::before,.corridor i::after{content:"";position:absolute;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--ember)}
.corridor i::before{left:0}.corridor i::after{right:0}

/* About */
.facts{margin:20px 0 0;padding:0}
.facts div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:6px 0;border-top:1px solid var(--rule);font-size:.93rem}
.facts div:last-child{border-bottom:1px solid var(--rule)}
.facts dt{color:var(--mute)}
.facts dd{margin:0}
blockquote{margin:22px 0 0;padding:0 0 0 18px;border-left:2px solid var(--ember)}
blockquote p{font-family:var(--serif);font-style:italic;font-size:1.4rem;line-height:1.25}
blockquote footer{font-size:.88rem;color:var(--mute);margin-top:4px}
.contact{display:flex;gap:28px;flex-wrap:wrap;margin-top:24px;font-size:1.05rem;font-weight:500}
.contact a{border-bottom:1px solid var(--ember);padding-bottom:2px}
.contact a:hover{color:var(--ember)}

/* Pager */
.pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;font-size:.9rem}
.foot{margin:0 var(--gutter) 12px;width:min(64vw,1100px)}
.legal{display:flex;flex-wrap:wrap;gap:2px 18px;margin-top:10px;padding-top:8px;border-top:1px solid var(--rule);font-size:.84rem;color:var(--mute)}
.legal strong{font-weight:600;color:var(--ink);font-size:1.08em}
.legal a{color:var(--ink);border-bottom:1px solid var(--ember)}
.legal a:hover{color:var(--ember)}
.pager a.step{white-space:nowrap;color:var(--mute);transition:color .2s}
.pager a.step:hover{color:var(--ember)}
.pager .next{text-align:right}
.pager .where{display:flex;align-items:center;gap:9px;color:var(--mute);font-size:.88rem}
.pager .where a{width:22px;height:3px;background:var(--rule);display:block}
.pager .where a[aria-current]{background:var(--ember)}
.pager .where a:hover{background:var(--ink)}
.pager .where span{margin-right:6px}

/* Home page: headline in two aligned lines, body text one step larger */
h1.two{max-width:none}
h1.two span{display:block}
.home .lede{font-size:1.16rem;max-width:58ch}
.home .figs dt,.home .doors p{font-size:1rem}
.home .doors .go{font-size:.98rem}
@media (min-width:901px){h1.two span{white-space:nowrap}}
@media (max-width:1180px){.col,.foot{width:min(58vw,900px)}}
@media (max-width:900px){
  body{font-size:19px}
  /* On narrow screens the artwork is shifted so its edge still shows at the right, with a light wash for legibility */
  body::before{background-position:64% center}
  body::after{content:"";position:fixed;inset:0;z-index:-1;background:rgba(237,237,237,.6)}
  .col{width:100%}
  .stage{align-items:flex-start;padding-top:36px;padding-bottom:36px}
  .top nav{gap:6px 16px;width:100%}
  .top nav a{font-size:.9rem}
  .figs,.figs.three{grid-template-columns:repeat(2,1fr)}
  .doors,.pair{grid-template-columns:1fr;gap:26px}
  .rows a,.rows .row{grid-template-columns:1fr;gap:2px}
  .flow{grid-template-columns:1fr}
  .flow .arrow{height:26px}
  .flow .arrow::before{left:50%;right:auto;top:3px;bottom:5px;border-top:0;border-left:1px solid var(--ink)}
  .flow .arrow::after{right:auto;left:50%;top:auto;bottom:4px;transform:translateX(-50%) rotate(135deg)}
  .line{grid-template-columns:1fr;gap:14px;padding-left:24px}
  .line::before{left:5px;right:auto;top:6px;bottom:6px;border-top:0;border-left:1px solid var(--ink)}
  .line time{height:auto}
  .line li::before{left:-24px;top:5px}
  .line b{margin-top:0}
  .steps,.steps.three{grid-template-columns:1fr 1fr}
  .facts div{grid-template-columns:1fr;gap:0}
  .pager{grid-template-columns:1fr 1fr}
  .foot{width:auto}
  .pager a.step{white-space:normal}
  .pager .where{display:none}
}