/* Peña's Landscape Services: areas.css
   Group "about-areas": /about/, /service-areas/, /service-areas/ventura-county/, /service-areas/la-westside/.
   Tokens, type and components come from site.css; this file only lays out what those pages add.
   Mobile first; breakpoints from design-system.md (480, 560, 768, 900, 1024). */

/* ===== Shared ===== */
.head--row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-bottom:40px}
.head--row h2{color:var(--green)}
.head h2,.head h3{color:var(--green)}
.dark .head h2{color:var(--cream)}
.rule__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:10px 0 0}
.rule__meta .src{margin:0}
.rule__meta .stamp{min-height:24px;padding:0 10px;font-size:10.5px;letter-spacing:.14em}
.photos--1{grid-template-columns:minmax(0,1fr)}
.photos--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:559px){.photos--2{grid-template-columns:minmax(0,1fr);gap:28px}}
@media (min-width:900px){.photos--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}}

/* ===== About: on the job (one portrait + one landscape; the hero carries the first photo) ===== */
.onjob{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.onjob__item{margin:0;display:flex;flex-direction:column;min-width:0}
.onjob__img{overflow:hidden;background:var(--line);aspect-ratio:4/5}
.onjob__img img{width:100%;height:100%;object-fit:cover}
.onjob__item--land .onjob__img{aspect-ratio:4/3}
.onjob figcaption,.onjob__item figcaption{margin-top:8px;font-size:15px}
@media (max-width:559px){.onjob figcaption{font-size:14px;letter-spacing:.05em}}
@media (min-width:560px){
  /* 1fr 2fr: the portrait's 3:4 box sets the row height, the landscape fills it (about 3:2),
     so both captions share a baseline. */
  .onjob{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px 16px;align-items:stretch}
  .onjob__img{aspect-ratio:3/4}
  .onjob__item--land .onjob__img{aspect-ratio:auto;flex:1;min-height:0;position:relative}
  .onjob__item--land .onjob__img img{position:absolute;inset:0;object-position:50% 30%}
}
@media (min-width:900px){.onjob{gap:24px}}

/* ===== About: six reasons (numbered, brass top rule, the .next voice) ===== */
.reasons{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--line)}
.reasons li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:14px;padding:26px 0;border-bottom:1px solid var(--line)}
.reasons__n{grid-row:span 2;font-family:var(--serif);font-size:40px;line-height:.9;color:var(--brass-ink);font-weight:500;font-variant-numeric:lining-nums}
.reasons h3{font-size:clamp(24px,2.3vw,28px);color:var(--green);margin:0 0 8px}
.reasons p{margin:0;color:var(--muted);font-size:16.5px;max-width:52ch}
.reasons p a{color:var(--brass-ink)}
@media (min-width:768px){
  .reasons{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;border-top:0}
  .reasons li{grid-template-columns:minmax(0,1fr);border-bottom:0;border-top:1px solid var(--brass);padding:26px 0 30px}
  .reasons__n{grid-row:auto;margin-bottom:14px}
  @supports (grid-template-rows:subgrid){.reasons li{grid-row:span 3;grid-template-rows:subgrid;row-gap:0}.reasons h3{align-self:end}}
}
@media (min-width:1024px){.reasons{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;row-gap:24px}}

/* ===== About: how we work (dark band, head and CTA left, steps right) ===== */
.howw__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.howw__head .head{margin-bottom:0}
.howw__cta{margin-top:32px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.howw__cta p{margin:0;font-size:14px;color:rgba(244,239,228,.78)}
@media (max-width:479px){.howw__cta,.howw__cta .btn{width:100%}}
@media (min-width:1024px){
  .howw__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:88px;align-items:start}
  .howw__head{position:sticky;top:120px}
  .howw .step{grid-template-columns:96px 1fr;padding:36px 0}
}

/* ===== About: credentials you can check ===== */
.creds{display:grid;grid-template-columns:minmax(0,1fr);margin:0;border-top:1px solid var(--line)}
.creds > div{padding:20px 0;border-bottom:1px solid var(--line);min-width:0}
.creds dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--brass-ink);margin:0 0 6px}
.creds dd{margin:0;font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.15;color:var(--green);font-variant-numeric:lining-nums}
.creds__link{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;min-height:44px;margin-top:4px;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-ink);text-decoration:none;border-bottom:1px solid var(--line)}
.creds__link svg{width:16px;height:16px;flex:none;transition:transform .25s var(--ease)}
.creds__link:hover{border-bottom-color:var(--brass)}
.creds__link:hover svg{transform:translateX(4px)}
.creds__note{margin:28px 0 0;font-size:15px;color:var(--muted);max-width:72ch;border-left:2px solid var(--brass);padding-left:14px}
@media (min-width:768px){
  .creds{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
}
@media (min-width:1100px){
  .creds{grid-template-columns:1.25fr 1.25fr 1.4fr 1fr;column-gap:0;border-bottom:1px solid var(--line)}
  .creds dd{font-size:24px}
  .creds > div{border-bottom:0;padding:24px 28px 24px;border-left:1px solid var(--line)}
  .creds > div:first-child{border-left:0;padding-left:0}
}

/* ===== Service areas hub: pill groups, county hub tiles, shared rules ===== */
.sa--hub{border-bottom:1px solid var(--line)}
.sa--hub .sa__col h3 a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:inherit;background-image:linear-gradient(var(--brass),var(--brass));background-size:0 1px;background-position:0 85%;background-repeat:no-repeat;transition:background-size .35s var(--ease)}
.sa--hub .sa__col h3 a:hover,.sa--hub .sa__col h3 a:focus-visible{background-size:100% 1px}
.sa--hub .sa__col h3{padding-bottom:4px}
.hubs{display:grid;grid-template-columns:minmax(0,1fr);gap:64px}
.hub .tile__img{aspect-ratio:3/2}
.hub__body{display:grid;justify-items:start}
.hub__cap{margin:0 0 14px;font-size:15px}
.hub .tile__city a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;background-image:linear-gradient(var(--brass),var(--brass));background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .35s var(--ease)}
.hub .tile__city a:hover,.hub .tile__city a:focus-visible{background-size:100% 1px}
.hub .tile__tags{margin:0 0 12px}
@media (min-width:768px){
  .hubs{grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 32px}
  .hub--b{margin-top:120px}
}
.shared{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--line)}
.shared__item{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;padding:26px 0;border-bottom:1px solid var(--line)}
.shared__n{font-family:var(--serif);font-size:40px;line-height:.9;color:var(--brass-ink);font-weight:500;font-variant-numeric:lining-nums}
.shared__item p{margin:0;font-size:17px;color:var(--ink);max-width:64ch}
.shared__item .rule__meta{margin-top:12px}
.shared__disc{margin:36px 0 0}
/* Hub shared rules on the dark band */
.dark .shared{border-top-color:var(--line-dark)}
.dark .shared__item{border-bottom-color:var(--line-dark)}
.dark .shared__n{color:var(--brass-hi)}
.dark .shared__item p{color:var(--cream)}
.dark .shared__item p a{color:var(--brass-hi)}
/* Hub city pills that link to their city card */
.pill--link{padding:0;min-height:44px;transition:border-color .25s var(--ease),background-color .25s var(--ease)}
.pill--link > a,.pill--link > span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;color:inherit;text-decoration:none}
.pill--link:hover,.pill--link:focus-within{border-color:var(--brass);background:var(--white)}
.pill--split > a:first-child,.pill--split > span:first-child{padding-right:2px}
.pill--split > small{margin:0 14px 0 6px}
.pill--link .pill__tag{padding:0 14px 0 6px;color:var(--brass-ink)}
.pill--link .pill__tag small{margin:0;text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:3px}
.pill--link .pill__tag:hover small{color:var(--green)}
.hero--inner .lede + .lede{margin-top:-14px}
@media (min-width:900px){
  .shared{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;border-top:0}
  .shared__item{grid-template-columns:minmax(0,1fr);border-bottom:0;border-top:1px solid var(--brass);padding:26px 0 0;align-content:start}
  .shared__item p{font-size:16.5px}
}

/* ===== County pages: along the 101 ===== */
.a101__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.a101__pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.a101__pills .pill{background:var(--white);min-height:40px;font-size:16px}
.a101 h2{font-size:clamp(32px,4vw,48px)}
@media (min-width:900px){.a101__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}}

/* ===== County pages: what we plan for here (dark) ===== */
.plan__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.plan__list{border-top:1px solid var(--line-dark)}
.plan__list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--line-dark);font-family:var(--serif);font-size:clamp(22px,2.4vw,28px);font-weight:600;line-height:1.2;color:var(--cream)}
.plan__list li::before{content:"";width:10px;height:10px;border:1px solid var(--brass-hi);transform:rotate(45deg);margin-top:.45em;justify-self:center}
@media (min-width:1024px){.plan__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:88px;align-items:start}}

/* ===== County pages: city by city rulebook ===== */
.jump{margin:0 0 48px}
.jump ul{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
.jump li{display:flex;border-bottom:1px solid var(--line)}
.jump a{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;min-height:56px;padding:10px 0;font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.2;color:var(--green);text-decoration:none}
.jump a svg{width:16px;height:16px;color:var(--brass-ink);transform:rotate(90deg);transition:transform .25s var(--ease)}
.jump a:hover{color:var(--brass-ink)}
.jump a:hover svg{transform:rotate(90deg) translateX(3px)}
@media (min-width:768px){.jump ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}
@media (min-width:1100px){.jump ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Facts that appear in every city card, printed once above the jump list */
.common{margin:0 0 48px;padding:26px 18px 6px;background:var(--white);border:1px solid var(--line);border-top:3px solid var(--brass)}
@media (min-width:480px){.common{padding:30px 26px 8px}}
.common__k{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--brass-ink);margin:0 0 20px}
.shared--common .shared__item:last-child{border-bottom:0}
@media (max-width:559px){
  .shared--common .shared__item{grid-template-columns:minmax(0,1fr);gap:8px;padding:22px 0}
  .shared--common .shared__n{font-size:30px}
}
@media (min-width:900px){
  .common{padding:34px 40px 30px}
  .shared--common{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.cities{display:grid;gap:32px}
.city{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--brass);padding:26px 18px 10px;min-width:0;scroll-margin-top:96px}
@media (min-width:480px){.city{padding:30px 26px 12px}}
.city__k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--brass-ink);margin:0 0 8px}
.city__head h3{font-size:clamp(28px,3vw,40px);color:var(--green);margin:0 0 14px;text-wrap:balance}
.city__hook{font-family:var(--serif);font-style:italic;font-size:21px;font-weight:500;line-height:1.35;color:var(--brass-ink);margin:0 0 20px;max-width:40ch}
.city__rules{margin:0}
.rule{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:18px 0;border-top:1px solid var(--line)}
.rule dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--green);margin:0 0 4px}
.rule dd{margin:0}
.rule dd + dd{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.rule dd > p:first-child{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink);max-width:68ch}
@media (min-width:768px){
  .rule{grid-template-columns:160px minmax(0,1fr);gap:0 24px;padding:20px 0}
  .rule dt{grid-column:1;grid-row:1 / span 12;padding-top:4px;margin:0}
  .rule dd{grid-column:2}
}
@media (min-width:1024px){
  .city{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;padding:40px 40px 20px}
  .city__head{position:sticky;top:110px;align-self:start;padding-bottom:20px}
  .city__rules .rule:first-child{border-top:0;padding-top:4px}
}
.rulebook__foot{margin-top:40px;display:grid;gap:16px}
.rulebook__more{margin:0;font-size:17px;color:var(--ink);max-width:68ch}
.rulebook__more a{color:var(--brass-ink);font-weight:600}
.rulebook .notice{margin:0;background:var(--white)}