/* WealthStone LLC — site styles
   Rebuilt static site. Design tokens taken from the original WordPress theme. */

/* ---------- tokens ---------- */
:root{
  --gold:#b7855c;
  --gold-dark:#9c6d47;
  --ink:#4b4b4b;
  --body:#58595b;
  --muted:#8a8a8c;
  --bg:#ffffff;
  --bg-alt:#f9f9f9;
  --rule:#d8d8d8;
  --rule-dark:#4b4b4b;
  --serif:"Libre Baskerville",Baskerville,"Baskerville Old Face",Georgia,"Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --wrap:1200px;
  --content:960px;
  --gutter:15px;
  --header-h:100px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--serif);font-size:16.8px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-dark)}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}
li{margin-bottom:.4em}
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:400;margin:0 0 .5em}
.visually-hidden{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.content{max-width:var(--content);margin:0 auto}
.br-top-dark{border-top:1px solid var(--rule-dark);padding-top:50px}
.br-top-primary{border-top:1px solid var(--gold);padding-top:34px}
.pt-3{padding-top:50px}
.pb-3{padding-bottom:50px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid transparent;transition:box-shadow .25s ease;
}
.site-header.is-stuck{box-shadow:0 1px 12px rgba(0,0,0,.08)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h)}
.logo{display:block;padding:14px 0}
.logo img{width:290px;max-width:60vw}

.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav > ul{display:flex;align-items:center;gap:0}
.site-nav > ul > li{position:relative}
.site-nav a{
  display:block;padding:12px 17px;
  font-family:var(--sans);font-size:11.8px;font-weight:500;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--gold);
}
.site-nav > ul > li.login{margin-left:26px}
.site-nav > ul > li.login a{color:var(--ink)}
.site-nav > ul > li.login a:hover{color:var(--gold)}
.site-nav .sub{
  position:absolute;left:0;top:100%;min-width:230px;background:#fff;
  box-shadow:0 6px 22px rgba(0,0,0,.10);padding:8px 0;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.site-nav > ul > li:hover .sub,
.site-nav > ul > li:focus-within .sub{opacity:1;visibility:visible;transform:none}
.site-nav .sub a{
  font-family:var(--serif);text-transform:none;letter-spacing:0;
  font-size:15px;color:var(--body);padding:7px 20px;
}
.site-nav .sub a:hover{color:var(--gold)}

.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;padding:12px;
  width:46px;height:46px;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  display:block;width:22px;height:1px;background:var(--ink);content:"";position:relative;
}
.nav-toggle span::before{position:absolute;top:-7px}
.nav-toggle span::after{position:absolute;top:7px}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:600px;display:flex;align-items:center;
  background-color:#e9e9e9;background-position:center;background-size:cover;background-repeat:no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.35) 34%,rgba(255,255,255,0) 62%);
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-copy{max-width:370px;padding:90px 0}
.hero-lede{
  font-size:21px;line-height:1.42;color:var(--ink);font-weight:400;margin-bottom:1.4em;
}
.hero-scroll a{
  font-family:var(--sans);font-size:11.8px;letter-spacing:1.1px;
  text-transform:uppercase;font-weight:500;font-style:italic;
}
.hero.hero-inner{min-height:430px}
.hero.hero-inner::after{background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,0) 55%)}

/* ---------- intro band ---------- */
.intro{background:var(--bg-alt);padding:50px 0}
.intro .content{padding-bottom:50px}
.intro h2{font-size:31px;line-height:1.2;color:var(--ink);margin:0}
.intro .grid{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;align-items:start}
.intro p{margin-bottom:0}

/* ---------- video ---------- */
.video{padding:70px 0}
.video .embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:1190px;margin:0 auto}
.video .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- alternating image / copy blocks ---------- */
.block{padding:34px 0}
.block .content{position:relative}
.block .row{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0 30px}
.block .figure{grid-row:1;position:relative;z-index:1}
.block .figure img{width:100%;aspect-ratio:870/1250;object-fit:cover}
.block .panel{grid-row:1;position:relative;z-index:2}
.block.img-left .figure{grid-column:1}
.block.img-left .panel{grid-column:2;margin-left:-120px}
.block.img-right .figure{grid-column:2}
.block.img-right .panel{grid-column:1;margin-right:-120px}
.block .panel-inner{background:#fff;padding:34px 0 0}
.block.img-left .panel-inner{padding-left:34px}
.block.img-right .panel-inner{padding-right:34px}

.eyebrow{font-size:30px;line-height:1.2;color:var(--gold);margin:0 0 .1em}
.eyebrow.dark{color:var(--ink)}
h3.headline{
  font-size:22px;line-height:1.4;letter-spacing:.6px;font-weight:400;
  color:var(--ink);font-style:italic;margin:0 0 1.1em;
}
h2.section-title{font-size:30px;color:var(--gold);line-height:1.2}
.block p{font-size:16.8px}

/* read more */
.read-buttons{margin:0}
.read-buttons a{
  font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:1.1px;
  text-transform:uppercase;cursor:pointer;
}
.read-more{display:none;padding-top:14px}
.read-more.is-open{display:block}
.read-more.is-open + .read-buttons a::after{content:""}

/* two-column intro layout used on interior pages */
.l1{padding:0 0 34px}
.l1 .grid{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;align-items:start}

/* ---------- learn more strip ---------- */
.learn-more{padding:26px 0 60px}
.learn-more .content{border-top:1px solid var(--gold);padding-top:26px}
.learn-more .row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 46px}
.learn-more .label{font-size:22px;color:var(--ink);margin:0;font-style:italic}
.learn-more a{
  font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:1.1px;text-transform:uppercase;
}

/* ---------- talk to us band ---------- */
.talk-band{background:var(--bg-alt);padding:100px 0 84px}
.talk-band .content{border-top:1px solid var(--rule-dark);padding-top:34px}
.talk-band .grid{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;align-items:start}
.talk-band h2{font-size:30px;line-height:1.25;color:var(--ink);margin:0}
.talk-band .cta{font-size:30px;color:var(--gold);font-family:var(--serif)}
.talk-band address{font-style:normal}
.talk-band .org{font-family:var(--sans);font-size:12px;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink)}

/* ---------- quote hero ---------- */
.quote-hero{
  position:relative;padding:65px 0;min-height:311px;display:flex;align-items:center;
  background-color:#3a3a3a;background-position:center;background-size:cover;background-repeat:no-repeat;
}
.quote-hero::after{content:"";position:absolute;inset:0;background:rgba(20,22,26,.42)}
.quote-hero .wrap{position:relative;z-index:2}
.quote-slider{max-width:713px;margin:0 auto;text-align:center;color:#fff;min-height:150px;display:flex;align-items:center;justify-content:center}
.quote-slider blockquote{margin:0;font-size:28px;line-height:1.5;color:#fff}
.quote-slider cite{display:block;font-size:15px;font-style:normal;color:rgba(255,255,255,.82);margin-top:.9em}

/* ---------- footer ---------- */
.site-footer{background:#fff}
.footer-grid{
  max-width:var(--wrap);margin:0 auto;padding:75px var(--gutter);
  display:grid;grid-template-columns:266px 1fr 260px;gap:40px;align-items:start;
}
.footer-grid .caption{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.4}
.footer-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.footer-menu ul{list-style:none;margin:0;padding:0}
.footer-menu .head{
  font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--ink);margin:0 0 12px;display:block;
}
.footer-menu li a{font-size:15px;color:var(--body)}
.footer-menu li a:hover{color:var(--gold)}
.footer-actions .btn{
  display:inline-block;border:1px solid var(--gold);color:var(--gold);
  font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:1.1px;
  text-transform:uppercase;padding:12px 22px;margin:0 0 12px;
}
.footer-actions .btn:hover{background:var(--gold);color:#fff}
.secondary-footer{border-top:1px solid var(--rule)}
.secondary-footer .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:26px;padding-bottom:26px;font-family:var(--sans);font-size:12px;color:var(--muted);
}
.secondary-footer a{color:var(--muted)}
.secondary-footer a:hover{color:var(--gold)}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;align-items:start}
.contact-form label{display:block;margin-bottom:16px}
.contact-form input,.contact-form textarea{
  width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;
  font-family:var(--serif);font-size:16.8px;color:var(--ink);padding:12px 2px;
}
.contact-form input:focus,.contact-form textarea:focus{outline:0;border-bottom-color:var(--gold)}
.contact-form textarea{min-height:120px;resize:vertical}
.contact-form .hp{position:absolute;left:-9999px}
.contact-form button{
  background:none;border:1px solid var(--gold);color:var(--gold);cursor:pointer;
  font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:1.1px;
  text-transform:uppercase;padding:13px 30px;margin-top:12px;
}
.contact-form button:hover{background:var(--gold);color:#fff}
.form-note{font-size:14px;color:var(--muted);margin-top:14px}

/* ---------- legal page ---------- */
.legal{padding:60px 0 20px}
.legal .content{max-width:820px}
.legal h1{font-size:31px;color:var(--ink);margin-bottom:1em}
.legal h2{font-size:19px;color:var(--gold);margin-top:2em}
.legal p{font-size:15.5px;line-height:1.65}

/* ---------- back to top ---------- */
.to-top{
  position:fixed;right:18px;bottom:18px;width:38px;height:38px;z-index:70;
  background:var(--gold);color:#fff;display:none;align-items:center;justify-content:center;
  font-size:14px;line-height:1;border-radius:2px;
}
.to-top.is-shown{display:flex}
.to-top:hover{background:var(--gold-dark);color:#fff}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .block.img-left .panel{margin-left:-60px}
  .block.img-right .panel{margin-right:-60px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .footer-actions{grid-column:1/-1}
}
@media (max-width:820px){
  .nav-toggle{display:block}
  .site-nav{
    position:absolute;left:0;right:0;top:100%;background:#fff;
    box-shadow:0 10px 24px rgba(0,0,0,.10);display:none;padding:10px 0 20px;
  }
  .site-nav.is-open{display:block}
  .site-nav > ul{display:block}
  .site-nav > ul > li.login{margin:8px 0 0}
  .site-nav a{padding:12px 24px}
  .site-nav .sub{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;padding:0 0 6px;
  }
  .site-nav .sub a{padding:6px 40px}

  .hero{min-height:440px}
  .hero-copy{max-width:none;padding:60px 0}
  .hero::after{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.45))}
  .hero.hero-inner{min-height:260px}

  .intro .grid,.l1 .grid,.talk-band .grid,.form-grid{grid-template-columns:1fr;gap:24px}

  .block .row{grid-template-columns:1fr;gap:0}
  .block .figure,.block .panel{grid-column:1!important}
  .block .figure{grid-row:1}
  .block .panel{grid-row:2;margin:0!important}
  .block .panel-inner{padding:26px 0 0!important}
  .block .figure img{aspect-ratio:16/10}

  .footer-grid{grid-template-columns:1fr;padding:50px var(--gutter)}
  .footer-menu{grid-template-columns:1fr;gap:22px}
  .secondary-footer .wrap{flex-direction:column;align-items:flex-start;gap:8px}
  .quote-slider blockquote{font-size:21px}
}

/* ==========================================================================
   Refinement layer — motion and micro-detail.
   Added on top of the original theme: no new colours, faces or layout. Every
   value below is derived from the tokens already declared at the top.

   Rule for everything here: the page must be complete and readable with no
   JavaScript. Nothing is hidden by CSS alone. The `.js-motion` class is set on
   <html> by site.js before first paint, so the "start" states of every reveal
   only exist when there is something running to finish them.
   ========================================================================== */

/* ---------- quality floor ---------- */

/* The header is sticky, so an anchor target would otherwise land underneath it.
   site.js compensates on click; this covers every other route to a hash. */
[id]{scroll-margin-top:calc(var(--header-h) + 18px)}

::selection{background:rgba(183,133,92,.22);color:var(--ink)}

/* The theme sets outline:0 on inputs, which left keyboard users with no visible
   focus at all. Restore it, for keyboard navigation only. */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible{outline-offset:1px}

/* Headings set in a serif this large break badly on a widow. */
h1,h2,h3,.eyebrow,.headline,.quote-slider blockquote{text-wrap:balance}
p,.hero-lede{text-wrap:pretty}

/* ---------- header: condenses as the page moves ---------- */
.site-header{transition:box-shadow .3s ease}
.site-header .wrap{transition:min-height .35s cubic-bezier(.2,.7,.2,1)}
.site-header.is-stuck .wrap{min-height:74px}
.logo{transition:padding .35s cubic-bezier(.2,.7,.2,1)}
.logo img{transition:width .35s cubic-bezier(.2,.7,.2,1)}
/* The logo sets the floor for header height, so it has to give as well or the
   condensed header never reaches the 74px above. */
.site-header.is-stuck .logo{padding:10px 0}
.site-header.is-stuck .logo img{width:232px}
/* A hairline in the brand gold, drawn across the header once it detaches. */
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left center;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.site-header.is-stuck::after{transform:scaleX(1)}
/* The dropdown hangs below the header and so crosses that hairline. Both it and
   the ::after compute z-index:auto, and a pseudo-element paints after its
   element's children, so without this the gold line is drawn straight across
   the open panel and its links sit behind it. */
.site-nav .sub{z-index:2}

/* ---------- nav: the underline wipes in, matching the hairline motif ---------- */
.site-nav > ul > li > a{position:relative}
.site-nav > ul > li > a::after{
  content:"";position:absolute;left:17px;right:17px;bottom:6px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
}
.site-nav > ul > li:hover > a::after,
.site-nav > ul > li:focus-within > a::after{transform:scaleX(1)}
.site-nav .sub{transition:opacity .2s ease,transform .24s cubic-bezier(.2,.7,.2,1),visibility .24s}
.site-nav .sub a{transition:color .2s ease,padding-left .24s cubic-bezier(.2,.7,.2,1)}
.site-nav .sub a:hover{padding-left:25px}

/* ---------- buttons: the fill wipes rather than snapping ---------- */
.footer-actions .btn,
.contact-form button{
  position:relative;overflow:hidden;z-index:0;
  transition:color .28s ease,border-color .28s ease;
}
.footer-actions .btn::before,
.contact-form button::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--gold);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .34s cubic-bezier(.2,.7,.2,1);
}
.footer-actions .btn:hover::before,
.footer-actions .btn:focus-visible::before,
.contact-form button:hover::before,
.contact-form button:focus-visible::before{transform:scaleX(1)}
.footer-actions .btn:hover,
.contact-form button:hover{background:none;color:#fff}

/* ---------- read more: expands instead of jumping ----------
   The 0fr -> 1fr technique sizes the first explicit row only, so a panel with
   several paragraphs would leave the rest in auto-sized implicit rows and never
   collapse. site.js wraps the contents in a single .read-more-inner to give the
   grid exactly one row to animate. */
.read-more{
  display:grid;grid-template-rows:0fr;
  padding-top:0;opacity:0;
  transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1),opacity .4s ease,padding-top .5s ease;
}
.read-more > *{overflow:hidden;min-height:0}
.read-more.is-open{grid-template-rows:1fr;opacity:1;padding-top:14px}
/* If the wrapper never gets made, fall back to the original hide rather than
   showing a half-collapsed block. */
.read-more:not(:has(> .read-more-inner)):not(.is-open){display:none}
.read-buttons a{position:relative;transition:color .2s ease}
.read-buttons a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.read-buttons a:hover::after,
.read-buttons a:focus-visible::after{transform:scaleX(1)}

/* ---------- footer + back to top ---------- */
.footer-menu li a{
  display:inline-block;
  transition:color .22s ease,transform .28s cubic-bezier(.2,.7,.2,1);
}
.footer-menu li a:hover{transform:translateX(4px)}
.secondary-footer a{transition:color .22s ease}

/* Was display:none/flex, so it appeared with no transition at all. */
.to-top{
  display:flex;opacity:0;visibility:hidden;
  transform:translateY(10px);
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.2,1),background .22s ease,visibility .35s;
}
.to-top.is-shown{opacity:1;visibility:visible;transform:none}

/* ---------- form ---------- */
.contact-form input,
.contact-form textarea{transition:border-bottom-color .28s ease}
.form-note{transition:color .25s ease}

/* ---------- quote rotator ---------- */
.quote-slider figure{
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);
}
.quote-slider figure.is-out{opacity:0;transform:translateY(8px)}

/* ==========================================================================
   Reveals. Start states are scoped to .js-motion so a no-JS page shows
   everything immediately.
   ========================================================================== */

/* Hero: a slow settle on the image, copy stepping in behind it. site.js adds
   .hero-bg carrying the same image, so the backdrop can scale without dragging
   the scrim or the copy with it. */
.hero{overflow:hidden}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.js-motion .hero-bg{
  transform:scale(1.06);
  transition:transform 1.8s cubic-bezier(.2,.7,.2,1);
}
.js-motion .hero.is-in .hero-bg{transform:scale(1)}

.js-motion .hero-copy > *{
  opacity:0;transform:translateY(14px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);
}
.js-motion .hero.is-in .hero-copy > *{opacity:1;transform:none}
.js-motion .hero.is-in .hero-copy > *:nth-child(1){transition-delay:.18s}
.js-motion .hero.is-in .hero-copy > *:nth-child(2){transition-delay:.32s}
.js-motion .hero.is-in .hero-copy > *:nth-child(3){transition-delay:.44s}

/* The signature: the panel slides over the figure, in the direction the layout
   already overlaps. The figure settles under it a beat earlier. */
.js-motion .block .figure{
  opacity:0;transform:scale(1.04);
  transition:opacity .8s ease,transform 1s cubic-bezier(.2,.7,.2,1);
}
.js-motion .block .figure.is-in{opacity:1;transform:none}

.js-motion .block .panel{
  opacity:0;
  transition:opacity .7s ease .12s,transform .85s cubic-bezier(.2,.7,.2,1) .12s;
}
.js-motion .block.img-left .panel{transform:translateX(34px)}
.js-motion .block.img-right .panel{transform:translateX(-34px)}
.js-motion .block .panel.is-in{opacity:1;transform:none}

/* Hairlines draw left to right. The site is built on these rules, so animating
   them is what makes the structure read as deliberate rather than incidental. */
.js-motion .br-top-primary,
.js-motion .br-top-dark,
.js-motion .learn-more .content{position:relative;border-top-color:transparent}
.js-motion .br-top-primary::before,
.js-motion .br-top-dark::before,
.js-motion .learn-more .content::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1s cubic-bezier(.2,.7,.2,1);
}
.js-motion .br-top-primary::before,
.js-motion .learn-more .content::before{background:var(--gold)}
.js-motion .br-top-dark::before{background:var(--rule-dark)}
.js-motion .br-top-primary.is-in::before,
.js-motion .br-top-dark.is-in::before,
.js-motion .learn-more .content.is-in::before{transform:scaleX(1)}

/* Everything else: a short, quiet rise. */
.js-motion [data-rise]{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);
}
.js-motion [data-rise].is-in{opacity:1;transform:none}

/* ---------- respect the setting ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .js-motion .hero-bg,
  .js-motion .hero-copy > *,
  .js-motion .block .figure,
  .js-motion .block .panel,
  .js-motion [data-rise]{opacity:1;transform:none}
  .js-motion .br-top-primary::before,
  .js-motion .br-top-dark::before,
  .js-motion .learn-more .content::before{transform:scaleX(1)}
}

/* ==========================================================================
   Responsive corrections.
   Kept at the end of the file so these win over both the original media query
   and the refinement layer above.
   ========================================================================== */

/* A long unbroken string cannot be wrapped by the layout, so it paints straight
   through the right edge and gives the whole document a horizontal scrollbar.
   The privacy policy carries a 613px EU authorities URL, which is what pushed
   legal-disclaimer to 373px wide inside a 320px screen. */
body{overflow-wrap:break-word}
.legal a{word-break:break-word}

@media (max-width:820px){
  /* The panel slides sideways over the figure only where the layout actually
     overlaps. Stacked, there is nothing to slide over, and a 34px horizontal
     offset on a not-yet-revealed panel was itself causing a horizontal scroll
     on every page with a block. It rises instead. */
  .js-motion .block.img-left .panel,
  .js-motion .block.img-right .panel{transform:translateY(20px)}
  .js-motion .block .panel.is-in{transform:none}
}

/* ---------- touch targets ----------
   Sized for fingers on any touch device, not by width: a tablet needs this as
   much as a phone. The hit area is grown with a pseudo-element wherever the
   control sits in running text, so nothing moves visually. */
@media (pointer:coarse){

  /* Standalone controls: real padding, they have room. */
  .read-buttons a,
  .hero-scroll a,
  .learn-more a{position:relative;display:inline-block}
  .read-buttons a::before,
  .hero-scroll a::before,
  .learn-more a::before{
    content:"";position:absolute;left:-10px;right:-10px;top:-14px;bottom:-14px;
  }

  /* Wrapped rows need vertical room before the hit areas are grown, or two
     rows of links would overlap each other. */
  .learn-more .row{gap:20px 46px}

  /* Footer navigation is a list of real destinations; give it tappable rows. */
  .footer-menu li{margin-bottom:0}
  .footer-menu li a{padding:9px 0}
  .footer-menu .head{padding:4px 0 10px}

  /* Phone and email in the contact blocks are the primary actions on a phone. */
  .talk-band address a,
  .l1 address a{position:relative;display:inline-block}
  .talk-band address a::before,
  .l1 address a::before{
    content:"";position:absolute;left:-8px;right:-8px;top:-12px;bottom:-12px;
  }

  /* Legal Disclaimer in the bottom bar: 15px tall and the only link down there. */
  .secondary-footer a{position:relative;display:inline-block}
  .secondary-footer a::before{
    content:"";position:absolute;left:-10px;right:-10px;top:-14px;bottom:-14px;
  }

  /* Form controls. */
  .contact-form input,
  .contact-form textarea{padding:14px 2px}
  .contact-form button{padding:16px 30px}

  .to-top{width:46px;height:46px}
}

/* Very small phones: the 320px class still in use on the iPhone SE. */
@media (max-width:360px){
  .eyebrow{font-size:26px}
  h2.section-title,.intro h2,.talk-band h2{font-size:26px}
  .quote-slider blockquote{font-size:19px}
  .learn-more .label{font-size:20px}
  .footer-actions .btn{display:block;text-align:center}
}