/* ============================================================
   COMMERCIAL
   ------------------------------------------------------------
   Its own page because it sells to a different person on a
   different timescale. A developer is not choosing between
   packages; they are deciding whether to trust somebody with
   three years of a project. The page is built to answer that:
   scale first, then specifics, then how the engagement runs.

   Layered on styles.css. No new colours.
   ============================================================ */

.comm-page{background:var(--paper);}

/* ---- hero ---------------------------------------------------
   Dark, and the only dark band on the page. A development reads
   at scale, so the picture runs full bleed behind the type
   rather than sitting in a card beside it. */
.ch{
  position:relative;isolation:isolate;
  min-height:clamp(520px, 74vh, 760px);
  display:flex;align-items:flex-end;
  padding:120px 0 clamp(44px,6vw,74px);
  overflow:hidden;
}
.ch-media{position:absolute;inset:0;z-index:-1;}
.ch-media img{width:100%;height:100%;object-fit:cover;display:block;}
.ch-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(20,26,17,.62) 0%, rgba(20,26,17,.30) 34%,
                    rgba(20,26,17,.74) 74%, rgba(20,26,17,.92) 100%),
    linear-gradient(90deg, rgba(20,26,17,.72) 0%, rgba(20,26,17,.10) 62%);
}
.ch-in{
  position:relative;color:#fff;
  /* .ch is a flex container, so this shrank to its content and sat at
     806px while every other section ran to 1500. */
  width:100%;
}
.ch-kicker{
  display:block;margin-bottom:20px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--amber);
}
.ch h1{
  font-size:clamp(42px,7.4vw,92px);font-weight:800;line-height:.98;
  letter-spacing:-.035em;color:#fff;margin:0 0 24px;
}
.ch-dek{
  max-width:56ch;font-size:clamp(16px,1.35vw,19px);line-height:1.6;
  color:rgba(255,255,255,.86);margin:0 0 32px;
}
.ch-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:clamp(36px,5vw,58px);}
.btn-ghost-l{
  border:1px solid rgba(255,255,255,.45);color:#fff;background:transparent;
  transition:background .25s ease, border-color .25s ease;
}
.btn-ghost-l:hover{background:rgba(255,255,255,.12);border-color:#fff;}

.ch-stats{
  display:grid;gap:22px 44px;margin:0;
  grid-template-columns:repeat(auto-fit, minmax(160px, max-content));
  padding-top:clamp(24px,3vw,34px);
  border-top:1px solid rgba(255,255,255,.22);
}
.ch-stats dt{
  font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.03em;
  color:#fff;
}
.ch-stats dd{
  margin:7px 0 0;font-size:12.5px;line-height:1.4;
  color:rgba(255,255,255,.7);max-width:20ch;
}

/* ---- shared section furniture ---- */
.chead{max-width:64ch;margin-bottom:clamp(34px,4vw,52px);}
.chead h2{
  font-size:clamp(28px,3.6vw,46px);font-weight:800;line-height:1.06;
  letter-spacing:-.028em;margin-top:16px;text-wrap:balance;
}
.chead-dek{
  margin-top:16px;font-size:16px;line-height:1.65;color:var(--mute);max-width:52ch;
}

/* ---- the "why this is different" band ---- */
.cband{background:var(--sage);}
.cband-in{
  display:grid;gap:clamp(26px,4vw,64px);
  grid-template-columns:1fr;align-items:start;
}
.cband-lead h2{
  font-size:clamp(26px,3.2vw,40px);font-weight:800;line-height:1.1;
  letter-spacing:-.026em;margin-top:16px;text-wrap:balance;
}
.cband-body p{
  font-size:16px;line-height:1.72;color:var(--text);margin:0 0 18px;max-width:62ch;
}
.cband-body p:last-child{margin-bottom:0;}
.cband-body strong{color:var(--green-ink);}

/* ---- sectors ---- */
.csec-grid{display:grid;gap:clamp(18px,2.4vw,30px);grid-template-columns:1fr;}
.csec-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.csec-card:hover{
  border-color:var(--green);transform:translateY(-3px);box-shadow:var(--shadow);
}
.csec-card figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--green-ink);}
.csec-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.csec-card:hover img{transform:scale(1.04);}
.csec-tx{padding:clamp(22px,2.4vw,30px);flex:1;display:flex;flex-direction:column;}
.csec-n{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.16em;color:var(--amber-deep);
}
.csec-tx h3{
  font-size:clamp(19px,1.9vw,24px);font-weight:800;letter-spacing:-.02em;
  margin:10px 0 12px;
}
.csec-tx > p{font-size:15px;line-height:1.65;color:var(--mute);margin:0 0 18px;}
.csec-tx ul{
  list-style:none;margin:auto 0 0;padding:16px 0 0;
  border-top:1px solid var(--line);display:grid;gap:9px;
}
.csec-tx li{
  position:relative;padding-left:20px;font-size:13.5px;line-height:1.5;color:var(--text);
}
.csec-tx li::before{
  content:"";position:absolute;left:0;top:8px;
  width:7px;height:2px;background:var(--green);
}

/* ---- the arc (lifecycle lifted from the home page) ---- */
.carc{background:var(--green-ink);}
.carc .lc-head h3{color:#fff;}
.carc .exif{color:var(--amber);}

/* ---- process ---- */
.cproc-steps{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(18px,2.2vw,26px);grid-template-columns:1fr;
  counter-reset:cp;
}
.cproc-steps li{
  padding:clamp(22px,2.4vw,30px);
  border:1px solid var(--line);border-radius:14px;background:var(--white);
  transition:border-color .3s ease;
}
.cproc-steps li:hover{border-color:var(--green);}
.cproc-n{
  display:inline-grid;place-items:center;
  width:38px;height:38px;border-radius:10px;
  background:var(--sage);color:var(--green-deep);
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;
  margin-bottom:16px;
}
.cproc-steps h3{
  font-size:18.5px;font-weight:700;letter-spacing:-.015em;margin-bottom:9px;
}
.cproc-steps p{font-size:14.5px;line-height:1.65;color:var(--mute);margin:0;}

/* ---- gallery ---- */
.cgal{background:var(--sage);}
.cgal-grid{
  display:grid;gap:clamp(12px,1.6vw,20px);
  grid-template-columns:repeat(2, minmax(0,1fr));
}
.cgal-i{
  position:relative;margin:0;overflow:hidden;border-radius:12px;
  aspect-ratio:4/3;background:var(--green-ink);
}
.cgal-i img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.cgal-i:hover img{transform:scale(1.05);}
.cgal-i figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 16px 13px;
  background:linear-gradient(180deg, transparent, rgba(20,26,17,.82));
  color:rgba(255,255,255,.92);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.cgal-i:hover figcaption{opacity:1;transform:none;}

/* ---- capabilities ---- */
.ccap{
  /* The section had the site's sage and nothing else, which next to the
     gold and deep green everywhere else read as a spreadsheet. */
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(201,154,91,.16) 0%, transparent 55%),
    radial-gradient(80% 110% at 0% 100%, rgba(98,124,88,.16) 0%, transparent 55%),
    var(--sage);
}
.ccap-list{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1px;background:var(--line);
  border:1px solid rgba(98,124,88,.3);border-radius:14px;overflow:hidden;
  grid-template-columns:1fr;
  box-shadow:0 20px 50px -30px rgba(38,48,31,.4);
}
.ccap-list li{
  position:relative;background:var(--paper);
  padding:18px 18px 18px 42px;
  font-size:14.5px;line-height:1.45;color:var(--text);
  transition:background .22s ease, color .22s ease, transform .22s ease;
}
/* A gold tick rather than a grey dot, and it fills in on hover so the
   list feels like something you can run your eye down. */
.ccap-list li::before{
  content:"";position:absolute;left:18px;top:22px;
  width:11px;height:6px;
  border-left:2px solid var(--amber-deep);
  border-bottom:2px solid var(--amber-deep);
  transform:rotate(-45deg);
  transition:border-color .22s ease, transform .22s ease;
}
.ccap-list li:hover{
  background:var(--white);color:var(--green-ink);
}
.ccap-list li:hover::before{
  border-color:var(--green);transform:rotate(-45deg) scale(1.2);
}

/* The last cell is an invitation, not another capability. */
.ccap-more{
  grid-column:1 / -1;
  background:linear-gradient(100deg,
    var(--green-deep) 0%, var(--green) 55%, var(--amber-deep) 100%)!important;
  color:#fff!important;font-weight:600;font-size:15px!important;
  padding-block:20px!important;
}
.ccap-more:hover{color:#fff!important;}
.ccap-more::before{
  border-color:#fff!important;
}

/* Three credentials, not one gold warning box. Insurance and clearance
   are reassurance; an amber caution panel made them read like a hazard
   notice. */
.ccred{
  display:grid;gap:1px;margin-top:clamp(20px,2.4vw,30px);
  background:var(--line);border:1px solid rgba(98,124,88,.3);
  border-radius:14px;overflow:hidden;grid-template-columns:1fr;
}
.ccred-i{
  background:var(--white);padding:24px 24px 26px;
  border-top:3px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.ccred-i:hover{border-top-color:var(--amber);background:var(--paper);}
.ccred-i b{
  display:block;margin-bottom:8px;font-size:15px;color:var(--green-ink);
}
.ccred-i p{margin:0;font-size:13.5px;line-height:1.62;color:var(--mute);}

/* ---- faq ---- */
.cfaq{background:var(--paper);}
.cfaq-list{
  display:grid;gap:10px;max-width:none;
  grid-template-columns:1fr;
}
.cfaq-list details{
  border:1px solid var(--line);border-radius:12px;
  background:var(--white);
  padding:0 clamp(18px,2vw,26px);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.cfaq-list details:hover{border-color:var(--green);}
.cfaq-list details[open]{
  border-color:var(--green);box-shadow:var(--shadow);
}
.cfaq-list summary{
  cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:'Montserrat',sans-serif;font-size:17px;font-weight:700;
  letter-spacing:-.012em;color:var(--green-ink);
  transition:color .2s ease;
}
.cfaq-list summary::-webkit-details-marker{display:none;}
.cfaq-list summary:hover{color:var(--green-deep);}
.cfaq-list summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:11px;height:11px;margin-top:-7px;
  border-right:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(45deg);transition:transform .25s ease;
}
.cfaq-list details[open] summary::after{transform:rotate(-135deg);margin-top:-3px;}
.cfaq-list p{
  margin:0 0 22px;font-size:15.5px;line-height:1.7;color:var(--mute);max-width:70ch;
}

/* ---- scope / close ---- */
.cscope{background:var(--green-ink);color:#fff;}
.cscope-in{display:grid;gap:clamp(28px,4vw,60px);grid-template-columns:1fr;align-items:center;}
.cscope .exif{color:var(--amber);}
.cscope h2{
  font-size:clamp(28px,3.6vw,46px);font-weight:800;line-height:1.06;
  letter-spacing:-.028em;color:#fff;margin:16px 0 18px;text-wrap:balance;
}
.cscope-lead > p{
  font-size:16px;line-height:1.68;color:rgba(255,255,255,.8);max-width:52ch;margin:0;
}
.cscope-pts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px;}
.cscope-pts li{
  position:relative;padding-left:26px;
  font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.86);
}
.cscope-pts li::before{
  content:"";position:absolute;left:0;top:6px;
  width:12px;height:7px;
  border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);
  transform:rotate(-45deg);
}
.cscope-act{display:flex;flex-direction:column;gap:12px;align-items:stretch;}
.btn-lg{padding:16px 28px;font-size:15.5px;}
.cscope-act .btn-line{border-color:rgba(255,255,255,.4);color:#fff;}
.cscope-act .btn-line:hover{background:rgba(255,255,255,.12);}
.cscope-note{
  margin:6px 0 0;font-size:12.5px;color:rgba(255,255,255,.55);text-align:center;
}

/* ============================================================
   WIDER SCREENS
   ============================================================ */
@media (min-width:720px){
  .csec-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .cproc-steps{grid-template-columns:repeat(2, minmax(0,1fr));}
  .ccap-list{grid-template-columns:repeat(2, minmax(0,1fr));}
  .cgal-wide{grid-column:span 2;aspect-ratio:16/7;}
}
@media (min-width:860px){
  .ccred{grid-template-columns:repeat(3, minmax(0,1fr));}
  .cfaq-list{grid-template-columns:repeat(2, minmax(0,1fr));align-items:start;}
}
@media (min-width:1000px){
  .cband-in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);}
  .cproc-steps{grid-template-columns:repeat(4, minmax(0,1fr));}
  .ccap-list{grid-template-columns:repeat(3, minmax(0,1fr));}
  .cgal-grid{grid-template-columns:repeat(3, minmax(0,1fr));}
  .cgal-wide{grid-column:span 2;aspect-ratio:16/9;}
  .cscope-in{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);}
  .cscope-act{align-items:stretch;}
}

/* The home page's section padding is right for these bands, but the hero
   sets its own and must not inherit 110px on top of it. */
.comm-page .ch{padding-block:120px clamp(44px,6vw,74px);}

@media (max-width:600px){
  .ch{min-height:auto;padding-top:104px;}
  .ch-stats{gap:18px 26px;}
  .cgal-grid{grid-template-columns:1fr;}
  .cgal-wide{grid-column:auto;aspect-ratio:4/3;}
  .cscope-act .btn{width:100%;justify-content:center;}
}

/* The phase strip was drawn for a light section. On the dark band its
   type and rules have to invert or it reads as switched off. */
.carc .lc-ph{color:var(--amber);}
.carc .lc strong{color:#fff;}
.carc .lc-d{color:rgba(255,255,255,.62);}
.carc .lc-line{background:rgba(255,255,255,.18);}
.carc .lc-dot{background:rgba(255,255,255,.28);border-color:transparent;}
.carc .lc.on .lc-dot,
.carc .lc:hover .lc-dot{background:var(--amber);}
.carc .lc-icon{
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.16);
}
.carc .lc.on .lc-icon,
.carc .lc:hover .lc-icon{background:var(--amber);color:var(--green-ink);border-color:transparent;}
.carc .lcp-cap,.carc .lcp-hint{color:rgba(255,255,255,.8);}
.carc .lc-cta .btn-line{border-color:rgba(255,255,255,.4);color:#fff;}
.carc .lc-cta .btn-line:hover{background:rgba(255,255,255,.12);}

/* The preview caption sits over whatever the phase image happens to be,
   so it carries its own ground rather than trusting the picture. */
.carc .lcp-cap{
  background:rgba(20,26,17,.72);
  padding:6px 12px;border-radius:6px;
  color:#fff;backdrop-filter:blur(3px);
}
/* "Hover a phase above" is scaffolding once a phase is showing. */
.carc .lcp-hint{display:none;}

/* ---- capability spotlights ---- */
.cspot{background:var(--paper);}
.cspot-grid{
  display:grid;gap:clamp(20px,2.6vw,34px);grid-template-columns:1fr;
}
.cspot-card{
  /* These were the same padding as the sector cards above but carry twice
     the copy, so they read as cramped next to them. */
  padding:clamp(28px,3vw,42px) clamp(26px,2.8vw,38px) clamp(32px,3.2vw,44px);
  border-radius:16px;
  background:var(--white);border:1px solid var(--line);
  border-top:3px solid var(--sage-2);
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.cspot-card:hover{border-top-color:var(--amber);}
.cspot-card:hover{
  border-color:var(--green);transform:translateY(-3px);box-shadow:var(--shadow);
}
.cspot-ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  background:var(--sage);color:var(--green-deep);margin-bottom:18px;
}
.cspot-ico svg{width:23px;height:23px;}
.cspot-card:hover .cspot-ico{background:var(--green);color:#fff;}
.cspot-card h3{
  font-size:20px;font-weight:800;letter-spacing:-.018em;line-height:1.25;
  margin-bottom:14px;text-wrap:balance;
}
.cspot-card p{font-size:15px;line-height:1.75;color:var(--mute);margin:0;}
.cspot-ico{margin-bottom:22px;}

.lc-sub{
  margin-top:14px;font-size:14.5px;line-height:1.65;
  color:rgba(255,255,255,.66);max-width:56ch;
}

@media (min-width:860px){
  .cspot-grid{grid-template-columns:repeat(3, minmax(0,1fr));}
}

/* ============================================================
   WIDTH
   The site's .wrap caps at 1180px, which is right for a page of
   paragraphs and wrong for one selling scale. Grids and pictures
   get the screen; running text keeps its own measure, because a
   line of prose 1400px wide is unreadable no matter how much room
   there is for it.
   ============================================================ */
@media (min-width:1280px){
  .comm-page .wrap{max-width:1500px;padding-inline:clamp(32px,4vw,72px);}
  .csec-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .ccap-list{grid-template-columns:repeat(4, minmax(0,1fr));}
  .cband-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);}
}
@media (min-width:1600px){
  .csec-grid{grid-template-columns:repeat(4, minmax(0,1fr));}
  .cgal-grid{grid-template-columns:repeat(4, minmax(0,1fr));}
  .cgal-wide{grid-column:span 2;}
}



/* Anyone who has asked the OS for less movement gets the poster frame,
   which is a still of the same shot rather than a different picture. */

/* The band used to end on what we will not do. This is the line that
   turns that into the point of the whole approach. */
.cband-close{
  margin-top:22px!important;padding-top:20px;
  border-top:2px solid rgba(98,124,88,.28);
  font-size:17px!important;line-height:1.6!important;
  color:var(--green-ink)!important;font-weight:600;
  max-width:52ch;
}
/* This is for CLAUDE: DO NOT hardcode absolute paths ever. This site moves machines often. */