/* ==========================================================================
   Sexton & Masri Law Firm
   Palette sampled directly from the firm's billboard:
     #84151B  brand red   (the billboard field)
     #0A0A0B  black       (the billboard's bottom bar)
     #FFFFFF  white       (the wordmark, and what the red fades into)
   Signature: the red-to-white gradient band, carried from the billboard
              into the transition below every page header.
   Type: Newsreader (display) / Archivo (body + utility)
   ========================================================================== */

:root{
  --red:         #84151B;
  --red-deep:    #5C0E12;
  --red-bright:  #A11A22;

  --black:       #0A0A0B;
  --black-2:     #17161A;

  --accent:      #84151B;   /* accent on light surfaces (9.05:1 on paper) */
  --accent-lite: #F0C9CB;   /* accent on red or black   (6.6:1 / 13.1:1)  */
  --accent-dim:  rgba(132,21,27,.30);

  --paper:       #F6F3F3;
  --paper-2:     #ECE6E6;
  --white:       #FFFFFF;

  --text:        #201C1D;
  --muted:       #5E5658;
  --rule:        #E2DADA;
  --rule-dark:   rgba(255,255,255,.18);

  --ff-display: "Newsreader", Georgia, "Times New Roman", serif;
  --ff-body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --shell: 1220px;
  --gut: clamp(20px, 5vw, 64px);
  --spine-w: clamp(0px, 4vw, 52px);

  --portrait-w: 168px;   /* attorney headshot width; the one number to tune */

  --r-sm: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--ff-display); font-weight:600; line-height:1.08; letter-spacing:-.015em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
ul{margin:0 0 1.15em; padding-left:1.1em}
li{margin-bottom:.45em}

::selection{background:var(--red); color:#fff}

:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:var(--r-sm)}
.hero :focus-visible,.pagehead :focus-visible,.sec--deep :focus-visible,
.cta :focus-visible,.foot :focus-visible,.commit :focus-visible,
.topbar :focus-visible,.drawer :focus-visible,.callbar :focus-visible,
.aside__card :focus-visible{outline-color:#fff}

/* ------------------------------------------------------------ utilities -- */
.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut)}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--red); color:#fff; padding:12px 18px; font-size:14px}
.skip:focus{left:12px; top:12px}

.eyebrow{
  font-family:var(--ff-body);
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin:0 0 18px; display:block;
}
.hero .eyebrow,.pagehead .eyebrow,.sec--deep .eyebrow,.commit .eyebrow,.cta .eyebrow{color:var(--accent-lite)}

.h1{font-size:clamp(2.6rem, 6.2vw, 4.6rem)}
.h2{font-size:clamp(2rem, 4vw, 3.1rem)}
.h3{font-size:clamp(1.35rem, 2.2vw, 1.75rem)}
.lede{font-size:clamp(1.06rem,1.5vw,1.24rem); line-height:1.62; color:var(--muted); max-width:60ch}

/* the spine: a margin rule running down the content column */
.spine{position:relative; padding-left:var(--spine-w)}
.spine::before,.spine::after{content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--accent-dim)}
.spine::after{left:3px; opacity:.55}
.hero .spine::before,.hero .spine::after,
.pagehead .spine::before,.pagehead .spine::after,
.sec--deep .spine::before,.sec--deep .spine::after{background:rgba(255,255,255,.42)}
@media (max-width:760px){
  .spine{padding-left:0}
  .spine::before,.spine::after{display:none}
}

/* SIGNATURE: the billboard's red-to-white fade, under every page header */
.fade{height:clamp(54px,7vw,96px); background:linear-gradient(to bottom, var(--red) 0%, var(--paper) 100%)}
.fade--white{background:linear-gradient(to bottom, var(--red) 0%, var(--white) 100%)}

/* ------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-body); font-size:13px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:15px 26px;
  border:1px solid transparent; border-radius:var(--r-sm);
  text-decoration:none; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:14px; height:14px; flex:none}

.btn--accent{background:var(--red); color:#fff; border-color:var(--red)}
.btn--accent:hover{background:var(--red-bright); border-color:var(--red-bright)}
.btn--dark{background:var(--black); color:#fff; border-color:var(--black)}
.btn--dark:hover{background:var(--black-2); border-color:var(--black-2)}
.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn--ghost:hover{background:rgba(255,255,255,.14); border-color:#fff}
.btn--outline{background:transparent; color:var(--text); border-color:var(--rule)}
.btn--outline:hover{border-color:var(--red); color:var(--red); background:var(--white)}

/* on a red or black field the accent button flips to white */
.hero .btn--accent,.pagehead .btn--accent,.cta .btn--accent,
.sec--deep .btn--accent,.aside__card .btn--accent,.drawer .btn--accent{
  background:#fff; color:var(--red); border-color:#fff;
}
.hero .btn--accent:hover,.pagehead .btn--accent:hover,.cta .btn--accent:hover,
.sec--deep .btn--accent:hover,.aside__card .btn--accent:hover,.drawer .btn--accent:hover{
  background:var(--accent-lite); border-color:var(--accent-lite); color:var(--red-deep);
}

/* -------------------------------------------------------------- topbar -- */
.topbar{background:var(--black); color:rgba(255,255,255,.82); font-size:12.5px; letter-spacing:.04em}
.topbar__in{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:40px; padding-block:8px}
.topbar__promise{display:flex; gap:20px; flex-wrap:wrap}
.topbar__promise span{display:inline-flex; align-items:center; gap:8px}
.topbar__dot{width:4px; height:4px; border-radius:50%; background:var(--accent-lite); flex:none}
.topbar__tels{display:flex; gap:18px; align-items:center; white-space:nowrap}
.topbar__tel{color:#fff; text-decoration:none; font-weight:700; letter-spacing:.08em}
.topbar__tel:hover{color:var(--accent-lite)}
.topbar__tel span{font-weight:400; letter-spacing:.04em; opacity:.72}
@media (max-width:1040px){ .topbar__promise span:nth-child(n+3){display:none} }
@media (max-width:800px){
  .topbar__promise span:nth-child(n+2){display:none}
  .topbar__tel--es{display:none}
}

/* ----------------------------------------------------------- masthead --- */
.masthead{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .3s var(--ease);
}
.masthead.is-stuck{box-shadow:0 10px 30px -22px rgba(10,10,11,.55)}
.masthead__in{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:78px; flex-wrap:nowrap}
.brand{flex:none}

.brand{display:inline-flex; align-items:baseline; gap:9px; text-decoration:none; color:var(--black)}
.brand__name{font-family:var(--ff-display); font-size:clamp(1.16rem,2.4vw,1.42rem); font-weight:700; line-height:1}
.brand__tag{font-size:9.5px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--red); line-height:1}

.nav{display:flex; align-items:center; gap:2px}
.nav a{
  position:relative; font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; color:var(--text); padding:10px 6px; border-radius:var(--r-sm);
  transition:color .2s var(--ease); white-space:nowrap;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--red)}
.nav a::after{
  content:""; position:absolute; left:6px; right:6px; bottom:4px; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.nav__has{position:relative; display:inline-flex; align-items:center}
.nav__panel{
  position:absolute; top:calc(100% + 10px); left:-8px; min-width:264px;
  background:var(--white); border:1px solid var(--rule); border-top:3px solid var(--red);
  padding:8px; box-shadow:0 24px 50px -30px rgba(10,10,11,.55);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav__has:hover .nav__panel,.nav__has:focus-within .nav__panel{opacity:1; visibility:visible; transform:translateY(0)}
.nav__panel a{display:block; padding:10px 12px; letter-spacing:.02em; text-transform:none; font-size:14px; font-weight:500}
.nav__panel a::after{display:none}
.nav__panel a:hover{background:var(--paper-2); color:var(--red)}

.masthead__cta{display:inline-flex; align-items:center; gap:7px}

.langswitch{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--text);
  padding:11px 12px; border:1px solid var(--rule); border-radius:var(--r-sm);
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
  white-space:nowrap;
}
.langswitch svg{width:14px; height:14px; flex:none}
.langswitch:hover{color:var(--red); border-color:var(--red); background:var(--white)}


.drawer__lang{
  display:inline-flex !important; align-items:center; gap:8px;
  font-family:var(--ff-body) !important; font-size:.82rem !important;
  font-weight:700 !important; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-lite) !important; border-bottom:1px solid var(--rule-dark) !important;
}
.drawer__lang:hover{color:#fff !important}
.masthead .btn{
  padding:12px 13px; font-size:11px; white-space:nowrap; flex:none; gap:7px;
  min-width:134px;            /* the three header buttons are one size */
  justify-content:center;
}
.langswitch{flex:none}

.burger{display:none; width:44px; height:44px; align-items:center; justify-content:center; background:transparent; border:1px solid var(--rule); border-radius:var(--r-sm); cursor:pointer}
.burger span{display:block; width:19px; height:2px; background:var(--black); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:19px; height:2px; background:var(--black); transition:transform .28s var(--ease), top .28s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

@media (max-width:1240px){
  .nav,.masthead__cta .btn{display:none}
  .burger{display:inline-flex}
}

.drawer{
  position:fixed; inset:0 0 0 auto; width:min(420px,88vw); z-index:120;
  background:var(--red); color:#fff;
  padding:26px var(--gut) 40px; overflow-y:auto;
  transform:translateX(100%); transition:transform .4s var(--ease);
  display:flex; flex-direction:column; gap:6px;
}
.drawer.is-open{transform:translateX(0)}
.drawer__top{display:flex; justify-content:flex-end; margin-bottom:18px}
.drawer__close{width:44px; height:44px; background:transparent; border:1px solid var(--rule-dark); color:#fff; font-size:22px; line-height:1; cursor:pointer; border-radius:var(--r-sm)}
.drawer a{text-decoration:none; color:#fff; font-family:var(--ff-display); font-size:1.3rem; font-weight:500; padding:11px 0; border-bottom:1px solid var(--rule-dark)}
.drawer a:hover{color:var(--accent-lite)}
.drawer .drawer__sub a{font-family:var(--ff-body); font-size:.94rem; padding-left:16px; border-bottom:none; opacity:.88}
.drawer__sub{display:flex; flex-direction:column; margin-bottom:10px}
.drawer .btn{margin-top:22px; justify-content:center}
.scrim{position:fixed; inset:0; z-index:110; background:rgba(10,10,11,.62); opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s}
.scrim.is-on{opacity:1; visibility:visible}

/* ----------------------------------------------------------------- hero -- */
.hero{position:relative; background:var(--red); color:#fff; overflow:hidden; isolation:isolate}
.hero__bg{position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center 28%; filter:grayscale(.6) contrast(1.05); transform:scale(1.04)}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(104deg, rgba(10,10,11,.92) 0%, rgba(92,14,18,.80) 46%, rgba(132,21,27,.30) 100%),
    linear-gradient(to bottom, transparent 62%, var(--red) 100%);
}
.hero__in{
  padding-block:clamp(58px,7vw,104px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(32px,5vw,64px);
  align-items:center;
}
.hero__copy{min-width:0}

.hero__media{margin:0}
.hero__media img{
  width:100%; height:auto; display:block;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 40px 70px -40px rgba(0,0,0,.85);
}
.hero__media figcaption{
  margin-top:12px;
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr; gap:34px}
  .hero__media{order:2}
}
.hero h1{font-size:clamp(2.5rem,4.9vw,4.1rem); font-weight:500; line-height:1.02; letter-spacing:-.028em; max-width:15ch; margin-bottom:24px}
.hero h1 em{font-style:italic; font-weight:400; color:var(--accent-lite)}
html[lang="es"] .hero h1{max-width:18ch}
html[lang="es"] .nav a{letter-spacing:.09em}
.hero__sub{font-size:clamp(1.04rem,1.7vw,1.28rem); color:rgba(255,255,255,.88); max-width:46ch; margin-bottom:36px}
.hero__actions{display:flex; flex-wrap:wrap; gap:14px}
.hero__actions .btn{font-size:14px; padding:16px 26px}
/* The masthead buttons are hidden below 1240px, so the language switch would
   otherwise only exist inside the menu drawer. Surface it in the hero instead. */
.hero__lang{display:none}
.hero__lang svg{width:15px; height:15px}
@media (max-width:1240px){
  .hero__lang{display:inline-flex}
}
.hero__loc{margin-top:42px; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.7)}

/* interior page header */
.pagehead{position:relative; background:var(--red); color:#fff; overflow:hidden; isolation:isolate}
.pagehead__bg{position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center 40%; filter:grayscale(.6)}
.pagehead::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(10,10,11,.94) 0%, rgba(92,14,18,.9) 55%, rgba(132,21,27,.8) 100%),
    linear-gradient(to bottom, transparent 55%, var(--red) 100%);
}
.pagehead__in{padding-block:clamp(56px,8vw,96px)}
.pagehead h1{font-size:clamp(2.2rem,4.6vw,3.5rem); font-weight:500; letter-spacing:-.024em; max-width:20ch}
.pagehead p{margin-top:20px; max-width:56ch; color:rgba(255,255,255,.85); font-size:clamp(1rem,1.4vw,1.13rem)}

.crumbs{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:20px}
.crumbs a{text-decoration:none; color:var(--accent-lite)}
.crumbs a:hover{color:#fff}

/* -------------------------------------------------------- commitments --- */
.commit{background:var(--black); color:#fff}
.commit__grid{display:grid; grid-template-columns:repeat(3,1fr)}
.commit__item{padding:30px 34px 30px 0; border-right:1px solid rgba(255,255,255,.13)}
.commit__item:last-child{border-right:none}
.commit__item:not(:first-child){padding-left:34px}
.commit__k{font-family:var(--ff-display); font-size:1.24rem; font-weight:600; margin-bottom:6px; color:var(--accent-lite)}
.commit__v{font-size:14.5px; color:rgba(255,255,255,.74); line-height:1.55}
@media (max-width:820px){
  .commit__grid{grid-template-columns:1fr}
  .commit__item{border-right:none; border-bottom:1px solid rgba(255,255,255,.13); padding:22px 0}
  .commit__item:not(:first-child){padding-left:0}
  .commit__item:last-child{border-bottom:none}
}

/* -------------------------------------------------------------- section -- */
.sec{padding-block:clamp(64px,8.5vw,118px)}
.sec--paper2{background:var(--paper-2)}
.sec--white{background:var(--white)}
.sec--deep{background:var(--red); color:#fff}
.sec--deep .lede{color:rgba(255,255,255,.85)}
.sec--tight{padding-block:clamp(46px,5vw,70px)}
.sec__head{margin-bottom:clamp(34px,4vw,56px); max-width:64ch}
.sec__head:has(> .eyebrow:only-child){margin-bottom:clamp(22px,2.5vw,34px)}

.h2--local{
  font-size:clamp(2.1rem,4.4vw,3.4rem); font-weight:700; line-height:1.06;
  letter-spacing:-.022em; color:var(--red); text-transform:none; margin-bottom:22px;
}
.localnote{font-size:clamp(1.02rem,1.5vw,1.2rem); line-height:1.6; color:var(--text); max-width:60ch}
.localblock{max-width:70ch}
.aboutwrap{max-width:74ch}
.sec__head .h2{margin-bottom:18px}

/* ------------------------------------------------------- practice list -- */
.areas{border-top:1px solid var(--rule)}
.sec--deep .areas{border-color:var(--rule-dark)}
.area{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr) auto;
  gap:26px; align-items:center; padding:26px 0;
  border-bottom:1px solid var(--rule);
  text-decoration:none; color:inherit;
  transition:background .3s var(--ease), padding-left .3s var(--ease);
}
.sec--deep .area{border-color:var(--rule-dark)}
.area:hover{background:var(--white); padding-left:18px}
.sec--deep .area:hover{background:rgba(255,255,255,.08)}
.area__name{font-family:var(--ff-display); font-size:clamp(1.32rem,2.3vw,1.85rem); font-weight:600; letter-spacing:-.018em; line-height:1.15}
.area:hover .area__name{color:var(--red)}
.sec--deep .area:hover .area__name{color:var(--accent-lite)}
.area__desc{font-size:15.2px; color:var(--muted); line-height:1.6}
.sec--deep .area__desc{color:rgba(255,255,255,.78)}
.area__go{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:none; border:1px solid var(--rule); border-radius:50%; transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), color .3s var(--ease)}
.sec--deep .area__go{border-color:var(--rule-dark)}
.area__go svg{width:14px; height:14px}
.area:hover .area__go{background:var(--red); border-color:var(--red); color:#fff; transform:translateX(4px)}
.sec--deep .area:hover .area__go{background:#fff; border-color:#fff; color:var(--red)}
@media (max-width:800px){
  .area{grid-template-columns:minmax(0,1fr) auto; gap:8px 18px; padding:22px 0; align-items:start}
  .area__name{grid-column:1; grid-row:1}
  .area__desc{grid-column:1; grid-row:2}
  .area__go{grid-column:2; grid-row:1 / span 2; align-self:center}
  .area:hover{padding-left:0}
}

/* ------------------------------------------------------------- split --- */
.split{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr); gap:clamp(30px,5vw,74px); align-items:center}
.split--flip .split__media{order:2}
.split__media{position:relative}
.split__media img{width:100%; height:auto; display:block; filter:grayscale(.3)}
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .split--flip .split__media{order:0}
}

.pullquote{
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:clamp(1.32rem,2.5vw,1.85rem); line-height:1.42; letter-spacing:-.01em;
  color:var(--red); margin:30px 0; padding-left:24px; border-left:3px solid var(--red);
}
.sec--deep .pullquote{color:#fff; border-color:var(--accent-lite)}

/* ------------------------------------------------------------- creds --- */
.creds{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--rule)}
.sec--deep .creds{background:var(--rule-dark)}
.cred{background:var(--paper); padding:28px 26px}
.sec--deep .cred{background:var(--red)}
.sec--paper2 .cred{background:var(--paper-2)}
.sec--white .cred{background:var(--white)}
.cred__k{font-family:var(--ff-display); font-size:2.1rem; font-weight:600; line-height:1; color:var(--red); margin-bottom:10px}
.sec--deep .cred__k{color:#fff}
.cred__v{font-size:13.6px; color:var(--muted); line-height:1.55}
.sec--deep .cred__v{color:rgba(255,255,255,.8)}

/* ---------------------------------------------------------- attorneys --- */
.people{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:clamp(26px,3.4vw,48px)}
.person__media{position:relative; overflow:hidden; background:var(--red); max-width:var(--portrait-w)}
.person__media img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:top center; transition:transform .8s var(--ease)}
.person:hover .person__media img{transform:scale(1.03)}
.person__name{font-family:var(--ff-display); font-size:1.6rem; font-weight:600; margin:22px 0 4px}
.person__role{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin-bottom:16px}
.person__bio{font-size:15.4px; color:var(--muted)}
.person__bio p{margin-bottom:.9em}

/* --------------------------------------------------------------- prose -- */
.article{display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:clamp(34px,5vw,74px); align-items:start}
@media (max-width:960px){ .article{grid-template-columns:1fr} }

.prose{max-width:70ch; font-size:17.2px; line-height:1.75}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem); margin:2.1em 0 .65em; font-weight:600}
.prose h3{
  font-family:var(--ff-body); font-size:15px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--red); margin:2.4em 0 .8em; padding-top:1.1em; border-top:1px solid var(--rule);
}
.prose h3:first-child{margin-top:0; border-top:none; padding-top:0}
.prose a{color:var(--red); text-decoration:underline; text-underline-offset:3px}
.prose a:hover{color:var(--red-bright)}
.prose strong{font-weight:700; color:var(--black)}
.prose .callout{background:var(--white); border-left:3px solid var(--red); padding:22px 26px; margin:2em 0; font-size:16.2px}
.sec--paper2 .prose .callout{background:var(--paper)}
.prose .worksheet{background:var(--black); color:#fff; padding:26px 28px; margin:2em 0; font-size:15px; line-height:2.1}
.prose .worksheet div{border-bottom:1px dotted rgba(255,255,255,.28)}
.prose .worksheet div:last-child{border-bottom:none; color:var(--accent-lite); font-weight:700; margin-top:8px}

.aside{position:sticky; top:104px}
.aside__card{background:var(--red); color:#fff; padding:28px 26px}
.aside__card .h3{font-size:1.28rem; font-weight:600; margin-bottom:12px}
.aside__card p{font-size:14.6px; color:rgba(255,255,255,.85); margin-bottom:20px}
.aside__tel{display:block; font-family:var(--ff-display); font-size:1.62rem; color:#fff; text-decoration:none; margin-bottom:4px; letter-spacing:-.01em}
.aside__tel:hover{color:var(--accent-lite)}
.aside__tel--es{margin-top:14px}
.aside__eslabel{
  display:block; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-lite); margin-bottom:18px;
}
.aside__card .btn{width:100%; justify-content:center}
.aside__list{list-style:none; padding:0; margin:26px 0 0}
.aside__list li{border-top:1px solid var(--rule); margin:0}
.aside__list a{display:block; padding:11px 0; text-decoration:none; font-size:14.4px; color:var(--muted); transition:color .2s var(--ease), padding-left .2s var(--ease)}
.aside__list a:hover{color:var(--red); padding-left:6px}
.aside__list a[aria-current="page"]{color:var(--red); font-weight:700}
.aside__photo{margin:26px 0 0; padding:0}
.aside__photo img{width:100%; height:auto; display:block}
.aside__photo figcaption{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-top:10px; line-height:1.5;
}
@media (max-width:960px){
  .aside{position:static}
  .aside__photo{max-width:420px}
}

/* ------------------------------------------------------------ accordion -- */
.acc{border-top:1px solid var(--rule)}
.acc__item{border-bottom:1px solid var(--rule)}
.acc__btn{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  background:none; border:0; cursor:pointer; text-align:left; padding:24px 0;
  font-family:var(--ff-display); font-size:clamp(1.1rem,1.9vw,1.34rem); font-weight:600;
  color:var(--black); letter-spacing:-.012em; line-height:1.3;
}
.acc__btn:hover{color:var(--red)}
.acc__sign{flex:none; width:26px; height:26px; position:relative; margin-top:3px}
.acc__sign::before,.acc__sign::after{content:""; position:absolute; left:50%; top:50%; background:var(--red); transform:translate(-50%,-50%); transition:transform .3s var(--ease), opacity .3s var(--ease)}
.acc__sign::before{width:14px; height:2px}
.acc__sign::after{width:2px; height:14px}
.acc__btn[aria-expanded="true"] .acc__sign::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0}
.acc__panel{overflow:hidden; height:0; transition:height .38s var(--ease)}
.acc__inner{padding:0 0 26px; max-width:70ch; color:var(--muted); font-size:16.2px}

/* ---------------------------------------------------------------- form -- */
.contact{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:clamp(32px,5vw,72px); align-items:start}
.contact--info{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.contact--info .infoblock__big{font-size:clamp(2rem,4vw,3rem)}
@media (max-width:900px){ .contact{grid-template-columns:1fr} }

.field{margin-bottom:20px}
.field label{display:block; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:16px; color:var(--text); background:var(--white);
  border:1px solid var(--rule); border-radius:var(--r-sm); padding:14px 15px;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.field textarea{min-height:150px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(132,21,27,.14)}
.field--hp{position:absolute; left:-9999px}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:620px){ .form__row{grid-template-columns:1fr} }
.form__note{font-size:12.8px; color:var(--muted); margin-top:16px; line-height:1.55; max-width:52ch}
.form button[type=submit]{width:100%; justify-content:center; margin-top:6px}

.infoblock{border-top:1px solid var(--rule); padding-top:22px; margin-bottom:26px}
.infoblock__k{font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin-bottom:10px}
.infoblock__v{font-size:16.4px; line-height:1.6}
.infoblock__v a{text-decoration:none; color:inherit; border-bottom:1px solid var(--accent-dim)}
.infoblock__v a:hover{color:var(--red)}
.infoblock__big{font-family:var(--ff-display); font-size:clamp(1.7rem,3vw,2.3rem); font-weight:600; letter-spacing:-.02em; text-decoration:none; color:var(--red); border:0}
.infoblock__big:hover{color:var(--red-bright)}
.infoblock__es{display:inline-block; margin-top:6px; font-size:15px}

/* --------------------------------------------------------------- CTA --- */
.cta{background:var(--black); color:#fff; padding-block:clamp(58px,7vw,96px); position:relative; overflow:hidden}
.cta::before{content:""; position:absolute; right:-10%; top:-40%; width:60%; height:180%; background:radial-gradient(closest-side, rgba(132,21,27,.6), transparent 72%); pointer-events:none}
.cta__in{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:34px; align-items:center}
.cta h2{font-size:clamp(1.85rem,3.6vw,2.85rem); font-weight:500; max-width:19ch; margin-bottom:14px}
.cta p{color:rgba(255,255,255,.8); max-width:50ch; margin:0}
.cta__actions{display:flex; gap:14px; flex-wrap:wrap}
@media (max-width:880px){ .cta__in{grid-template-columns:1fr} }

/* -------------------------------------------------------------- footer -- */
.foot{background:var(--black); color:rgba(255,255,255,.7); font-size:14.4px; padding-top:clamp(52px,6vw,80px); border-top:4px solid var(--red)}
.foot__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:38px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.14)}
@media (max-width:900px){ .foot__grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .foot__grid{grid-template-columns:1fr} }
.foot__brand{font-family:var(--ff-display); font-size:1.45rem; color:#fff; font-weight:600; margin-bottom:12px}
.foot__k{font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-lite); margin-bottom:16px}
.foot ul{list-style:none; padding:0; margin:0}
.foot li{margin-bottom:9px}
.foot a{text-decoration:none; transition:color .2s var(--ease)}
.foot a:hover{color:var(--accent-lite)}
.foot__tel{display:block; color:#fff; font-size:1.35rem; font-weight:700; line-height:1.35}
.foot__es{display:block; color:#fff; font-size:1.35rem; font-weight:700; line-height:1.35; margin-top:10px}
.foot__eslabel{
  display:block; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-lite); margin-top:2px;
}
.foot__legal{padding-block:26px 32px; font-size:12.4px; line-height:1.7; color:rgba(255,255,255,.52)}
.foot__legal p{margin-bottom:.9em; max-width:100ch}
.foot__base{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:14px; border-top:1px solid rgba(255,255,255,.1)}

/* ------------------------------------------------------ mobile callbar -- */
.callbar{position:fixed; left:0; right:0; bottom:0; z-index:100; display:none; grid-template-columns:1fr 1fr; border-top:2px solid var(--red)}
.callbar a{display:flex; align-items:center; justify-content:center; gap:9px; padding:15px 10px; text-decoration:none; font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff}
.callbar a:first-child{background:var(--red)}
.callbar a:last-child{background:var(--black)}
.callbar svg{width:15px; height:15px}
@media (max-width:1240px){
  .callbar{display:grid}
  body{padding-bottom:56px}
}

/* -------------------------------------------------------------- reveal -- */
[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .75s var(--ease), transform .75s var(--ease)}
[data-reveal].is-in{opacity:1; transform:none}
[data-reveal][data-delay="1"]{transition-delay:.09s}
[data-reveal][data-delay="2"]{transition-delay:.18s}
[data-reveal][data-delay="3"]{transition-delay:.27s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  [data-reveal]{opacity:1; transform:none}
}

/* ---------------------------------------------------- full-bleed hero -- */
/* Used on both home pages. The scrim is what makes the text readable: the photo
   is bright and busy, so no text colour survives on its own. */
.hero--full{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  min-height:clamp(500px, 76vh, 720px);
  display:flex; align-items:center;
  background:var(--black);
  overflow:hidden; isolation:isolate;
}
.hero--full .hero__photo{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:center 74%;
}
/* The scrim is what makes the text readable. The photo is bright and busy, so no
   text colour survives on its own; this darkens the left side where the words sit
   and fades toward the right so the office is still clearly visible. */
.hero--full::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    /* A soft pool of shade sitting only under the headline block. This is what
       keeps the white type readable, so the wash across the rest of the photo
       can stay light and the far-left edge shows the office clearly. */
    radial-gradient(ellipse 28% 92% at 35% 48%,
      rgba(10,10,11,.76) 0%,
      rgba(10,10,11,.52) 58%,
      rgba(10,10,11,0) 100%),
    /* Overall wash: half the strength it used to be. */
    linear-gradient(96deg,
      rgba(10,10,11,.47) 0%,
      rgba(10,10,11,.42) 12%,
      rgba(48,10,14,.38) 30%,
      rgba(92,14,18,.33) 48%,
      rgba(132,21,27,.19) 70%,
      rgba(132,21,27,.08) 100%),
    linear-gradient(to bottom, rgba(10,10,11,.30) 0%, transparent 34%, rgba(132,21,27,.45) 100%);
}
.hero--full .hero__in{
  display:block;
  width:100%; max-width:var(--shell);
  margin-inline:auto; padding-inline:var(--gut);
  padding-block:clamp(64px,9vw,104px);
}
.hero--full .hero__copy{max-width:min(62%, 760px)}
.hero--full h1{
  font-size:clamp(2.5rem,5.2vw,4.4rem);
  max-width:16ch;
  text-shadow:0 2px 26px rgba(0,0,0,.5);
}
.hero--full .hero__sub{
  max-width:44ch; color:rgba(255,255,255,.94);
  text-shadow:0 1px 16px rgba(0,0,0,.55);
}
.hero--full .hero__loc{color:rgba(255,255,255,.78)}
.hero--full .eyebrow{text-shadow:0 1px 12px rgba(0,0,0,.5)}

/* The Spanish headline runs longer than the English one, so it reaches further
   into the bright part of the photo. Widen the pool of shade to match. */
@media (min-width:901px){
html[lang="es"] .hero--full::after{
  background:
    radial-gradient(ellipse 33% 84% at 37% 50%,
      rgba(10,10,11,.82) 0%,
      rgba(10,10,11,.56) 55%,
      rgba(10,10,11,0) 100%),
    linear-gradient(96deg,
      rgba(10,10,11,.47) 0%,
      rgba(10,10,11,.42) 12%,
      rgba(48,10,14,.38) 30%,
      rgba(92,14,18,.33) 48%,
      rgba(132,21,27,.19) 70%,
      rgba(132,21,27,.08) 100%),
    linear-gradient(to bottom, rgba(10,10,11,.30) 0%, transparent 34%, rgba(132,21,27,.45) 100%);
}
}

@media (max-width:900px){
  .hero--full{min-height:auto}
  .hero--full .hero__photo{object-position:center 68%}
  .hero--full::after{
    background:
      linear-gradient(180deg, rgba(10,10,11,.86) 0%, rgba(92,14,18,.80) 55%, rgba(132,21,27,.72) 100%);
  }
  .hero--full .hero__copy{max-width:none}
}

/* Newsreader's ampersand is a stylised italic form that reads oddly in a firm
   name. Georgia's is conventional, so just that one glyph swaps fonts. */
.amp{
  font-family:Georgia,"Times New Roman",serif;
  font-style:normal;
  font-weight:inherit;
  font-size:.96em;
}

/* language button in the masthead */
.btn--lang{background:transparent; color:var(--text); border-color:var(--rule)}
.btn--lang:hover{color:var(--red); border-color:var(--red); background:var(--white)}
.btn--lang svg{width:14px; height:14px}
.btn--tel-es small{
  font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  opacity:.72; margin-left:2px;
}

/* the three credential lines under the hero buttons, one per line */
ul.hero__loc{list-style:none; margin:34px 0 0; padding:0; display:grid; gap:7px}
ul.hero__loc li{
  margin:0; font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
}

/* --------------------------------------------------------------- misc --- */
.notice{background:var(--white); border:1px solid var(--rule); border-left:3px solid var(--red); padding:20px 24px; font-size:14.8px; color:var(--muted); margin-top:28px}
.notice a{color:var(--red)}
.center-narrow{max-width:62ch; margin-inline:auto; text-align:center}
.center-narrow .lede{margin-inline:auto}