/* ============================================================
   S2 · TAKE THE BOXES OFF  (preview, 3 Oct 2026)
   Card grids become open layouts: a large heading, a hairline rule and the
   text, with the photography running edge to edge instead of framed.
   Linked after styles.css on Home, Why, Connectivity and Funding. Every rule
   is scoped to an `.unboxed` hook or the `.photo-band` wrapper (the Home
   pillars are reached through their section's existing id, #system), so
   nothing else on those pages moves. Company's At a glance is untouched.
   Undo: drop the <link>; the hooks do nothing without this file.
   ============================================================ */
:root{--rule:rgba(255,255,255,.14);}

/* ---------- Columns: Home pillars, Connectivity radio line, Funding steps ---------- */
.pillars.unboxed,#system .pillars{gap:0 clamp(32px,4vw,56px);margin-top:clamp(56px,7vw,88px);}
:is(.pillars.unboxed,#system .pillars) .pillar{background:none;border:0;border-top:1px solid var(--rule);border-radius:0;padding:28px 0 0;}
:is(.pillars.unboxed,#system .pillars) .pillar:hover{border-color:var(--rule);transform:none;}   /* no card, so no lift */
:is(.pillars.unboxed,#system .pillars) .pillar h3{font-size:clamp(1.5rem,1rem + 1.1vw,2rem);line-height:1.15;letter-spacing:-.015em;margin:18px 0 14px;}
:is(.pillars.unboxed,#system .pillars) .pillar p{font-size:1.05rem;line-height:1.65;}
@media (max-width:880px){.pillars.unboxed,#system .pillars{row-gap:44px;}}

/* ---------- Points: Home "Why agencies choose Aegent", Why page reasons ---------- */
.why-grid.unboxed{background:none;border:0;border-radius:0;overflow:visible;
  gap:clamp(40px,4.4vw,60px) clamp(40px,6vw,88px);margin-top:clamp(28px,3vw,40px);}
.why-grid.unboxed .why-item{background:none;padding:26px 0 0;border-top:1px solid var(--rule);}
.why-grid.unboxed .why-item h3{color:var(--ink);font-size:clamp(1.35rem,1rem + .75vw,1.6rem);line-height:1.2;letter-spacing:-.01em;margin-bottom:14px;}
.why-grid.unboxed .why-item p{font-size:1.06rem;line-height:1.65;}
@media (max-width:880px){.why-grid.unboxed{row-gap:40px;}}

/* ---------- Full-bleed photo band (Home + Connectivity proof, Why grant panel) ----------
   Desktop: the photo runs to the right edge and dissolves into the dark on the left,
   where the copy sits, so the subject stays clear of the text.
   Phone: the photo leads, edge to edge, and the text follows on dark ground. */
.photo-band{position:relative;isolation:isolate;}
.photo-band::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;right:0;width:max(58vw,620px);pointer-events:none;
  background:
    linear-gradient(180deg,var(--bg) 0%,rgba(5,8,10,0) 14%,rgba(5,8,10,0) 86%,var(--bg) 100%),
    linear-gradient(90deg,var(--bg) 0%,rgba(5,8,10,.6) 24%,rgba(5,8,10,0) 56%),
    linear-gradient(rgba(5,8,10,var(--band-dim,.32)),rgba(5,8,10,var(--band-dim,.32))),
    var(--band-photo) var(--band-pos,50% 40%)/cover no-repeat;}
@media (max-width:880px){
  .photo-band::before{bottom:auto;left:0;width:auto;height:var(--band-h-m,min(112vw,520px));
    background:
      linear-gradient(180deg,rgba(5,8,10,.35) 0%,rgba(5,8,10,0) 26%,rgba(5,8,10,.5) 66%,var(--bg) 100%),
      linear-gradient(rgba(5,8,10,var(--band-dim-m,0)),rgba(5,8,10,var(--band-dim-m,0))),
      var(--band-photo) var(--band-pos-m,50% 30%)/cover no-repeat;}
}

/* Proof ("Proven in the field") — Home and Connectivity */
.photo-band.proof-band{--band-photo:url("images/scene-corrections.jpg?v=3");--band-pos:50% 40%;--band-pos-m:52% 32%;}
.proof-band .cat-title{font-size:clamp(2rem,1rem + 3vw,3.4rem);line-height:1.04;max-width:34rem;text-wrap:balance;}
.proof.unboxed{padding-top:clamp(40px,6vh,64px);}
.proof.unboxed .proof-inner{border:0;border-radius:0;background:none;padding:0;overflow:visible;}
.proof.unboxed .proof-inner::after{content:none;}
.proof.unboxed .proof-grid{grid-template-columns:1fr;gap:clamp(40px,4.4vw,56px);max-width:32rem;}
.proof.unboxed .proof-card{background:none;border:0;border-top:1px solid var(--rule);border-radius:0;padding:26px 0 0;
  -webkit-backdrop-filter:none;backdrop-filter:none;}
.proof.unboxed .proof-card h3{font-size:clamp(1.7rem,1rem + 1.9vw,2.6rem);line-height:1.08;letter-spacing:-.02em;margin-bottom:16px;}
.proof.unboxed .proof-card p{font-size:1.06rem;line-height:1.65;}
.proof.unboxed .proof-note{text-align:left;max-width:32rem;margin-top:clamp(36px,4vw,52px);}
@media (max-width:880px){
  /* the kicker and headline rise out of the photo's dark foot; no line crosses the face */
  .proof-band .cat-band{padding-top:calc(min(112vw,520px) - 108px);}
}

/* ---------- Why: the contract contrast, without the two boxes ---------- */
.contrast.unboxed{gap:clamp(40px,6vw,88px);}
.contrast.unboxed .contrast-col{background:none;border:0;border-radius:0;padding:24px 0 0;border-top:1px solid var(--rule);}
.contrast.unboxed .contrast-col.rent{border-top-color:rgba(224,114,140,.55);}
.contrast.unboxed .contrast-col.own{border-top-color:rgba(52,198,212,.65);}
.contrast.unboxed .contrast-col li{font-size:1.06rem;}
@media (max-width:880px){.contrast.unboxed{gap:44px;}}

/* ---------- Why: the procurement panel — photo edge to edge, facts as an open list ---------- */
.cap.unboxed{max-width:none;padding:clamp(24px,4vh,48px) 0;
  --band-photo:url("images/scene-rural-p3k.jpg");--band-pos:58% 30%;--band-pos-m:64% 24%;--band-h-m:min(84vw,400px);
  --band-dim:.46;--band-dim-m:.2;}  /* a daylight photo: dimmed further so it sits in the dark palette */
.cap.unboxed .cap-inner{border:0;border-radius:0;background:none;overflow:visible;
  padding:clamp(72px,11vh,130px) max(6vw,calc(50% - 590px + 6vw));}
.cap.unboxed .cap-inner::after{content:none;}
.cap.unboxed .cap-grid{display:flex;flex-direction:column;align-items:flex-start;gap:0;max-width:34rem;}
.cap.unboxed .cap-grid>div:first-child{display:contents;}       /* lets the facts sit above the button (CSS order only) */
.cap.unboxed .cap-grid .specs{order:1;width:100%;margin:8px 0 6px;}
.cap.unboxed .cap-grid .home-link-wrap{order:2;}
.cap.unboxed .specs{background:none;border:0;border-radius:0;overflow:visible;gap:0 clamp(24px,3vw,40px);}
.cap.unboxed .spec{background:none;padding:16px 0 14px;border-top:1px solid var(--rule);}
.cap.unboxed .spec .v{font-size:1.12rem;margin-top:6px;}
@media (max-width:880px){
  .cap.unboxed .cap-inner{padding-top:calc(min(84vw,400px) - 40px);padding-bottom:clamp(48px,8vh,72px);}
}

/* ---------- Funding: the three steps use the column style above; programmes ---------- */
.fgrid.unboxed{gap:0 clamp(32px,4vw,56px);}
.fgrid.unboxed .fcard:nth-child(n+3){margin-top:clamp(48px,5vw,72px);}
.fgrid.unboxed .fcard{border:0;border-radius:0;background:none;overflow:visible;}
.fgrid.unboxed .fcard:hover{transform:none;}
/* each programme spans five rows of the grid (photo, tag, heading, text, funding line) so the
   rows line up across the two columns without boxes to hold them */
.fgrid.unboxed .fcard{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;}
.fgrid.unboxed .fcard-b{display:contents;}
.fgrid.unboxed .fcard-img{height:auto;aspect-ratio:2/1;margin-bottom:26px;}
.fgrid.unboxed .fcard-img::after{content:none;}
.fgrid.unboxed .fcard h3{font-size:clamp(1.4rem,1rem + .8vw,1.75rem);line-height:1.15;letter-spacing:-.01em;margin-bottom:12px;}
.fgrid.unboxed .fcard p{font-size:1rem;line-height:1.6;margin-bottom:18px;}
.fgrid.unboxed .fcard .prog{margin:0;border-top-color:var(--rule);padding-top:16px;font-size:.9rem;}
@media (max-width:980px){.fgrid.unboxed .fcard+.fcard{margin-top:56px;}}
@media (max-width:880px){.fgrid.unboxed .fcard-img{margin:0 -6vw 24px;aspect-ratio:16/9;}}  /* the photo runs edge to edge on a phone */

/* ---------- Funding: the process as an open timeline ---------- */
.pgrid.unboxed{background:none;border:0;border-radius:0;overflow:visible;gap:0;}
.pgrid.unboxed .pstep{position:relative;background:none;padding:30px 24px 0 0;border-top:1px solid var(--rule);}
.pgrid.unboxed .pstep::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 0 4px var(--bg);}
.pgrid.unboxed .pstep h3{font-size:1.1rem;}
.pgrid.unboxed .pstep p{font-size:.92rem;line-height:1.55;}
@media (max-width:980px){.pgrid.unboxed{row-gap:44px;}}
@media (max-width:560px){
  .pgrid.unboxed{row-gap:0;}
  .pgrid.unboxed .pstep{border-top:0;border-left:1px solid var(--rule);padding:0 0 34px 28px;}
  .pgrid.unboxed .pstep:last-child{padding-bottom:0;}
  .pgrid.unboxed .pstep::before{top:5px;left:-4px;}
}